Land the third design drop, seed the CMS, and retire the figures band
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:
Claude Opus 5
@@ -61,6 +61,8 @@ unreachable — the site must never 500 because Strapi is down.
|
|||||||
`skillNames: "resource:figma-design-to-code"`. File key `yvKHp3Ha2rQmv9kt9tCC7j`.
|
`skillNames: "resource:figma-design-to-code"`. File key `yvKHp3Ha2rQmv9kt9tCC7j`.
|
||||||
5. **Never invent statistics, dates, names or quotes.** If a number is not in `docs/` or in
|
5. **Never invent statistics, dates, names or quotes.** If a number is not in `docs/` or in
|
||||||
the CMS, it does not go on the page. Leave the slot empty or omit the component.
|
the CMS, it does not go on the page. Leave the slot empty or omit the component.
|
||||||
|
The same rule governs the seed: anything invented belongs in `src/seed/demo.ts`, never
|
||||||
|
in `approved.ts`, and `pnpm seed` without `--demo` must stay publishable.
|
||||||
6. **`docs/` is read-only source material.** Never edit, move or "clean up" those files.
|
6. **`docs/` is read-only source material.** Never edit, move or "clean up" those files.
|
||||||
7. **Both locales, always.** New UI text goes into `app/i18n/messages/en.json` *and*
|
7. **Both locales, always.** New UI text goes into `app/i18n/messages/en.json` *and*
|
||||||
`ar.json` with identical keys (the `Messages` type enforces it). A component that hard-codes
|
`ar.json` with identical keys (the `Messages` type enforces it). A component that hard-codes
|
||||||
@@ -86,6 +88,7 @@ unreachable — the site must never 500 because Strapi is down.
|
|||||||
| HTML shell, canonical, hreflang | `apps/web/app/root.tsx` |
|
| HTML shell, canonical, hreflang | `apps/web/app/root.tsx` |
|
||||||
| Content types | `apps/cms/src/api/<name>/content-types/<name>/schema.json` |
|
| Content types | `apps/cms/src/api/<name>/content-types/<name>/schema.json` |
|
||||||
| Boot-time locale + permission setup | `apps/cms/src/bootstrap/` |
|
| Boot-time locale + permission setup | `apps/cms/src/bootstrap/` |
|
||||||
|
| CMS seed content (`pnpm seed`) | `apps/cms/src/seed/` — `approved.ts` is from `docs/`; `demo.ts` is invented, opt-in behind `--demo`, every slug prefixed `demo-` |
|
||||||
| CORS, upload rules, i18n locales | `apps/cms/config/{middlewares.ts,plugins.ts}` |
|
| CORS, upload rules, i18n locales | `apps/cms/config/{middlewares.ts,plugins.ts}` |
|
||||||
|
|
||||||
## Conventions that bite
|
## Conventions that bite
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ publications — all of it in English and Arabic, with the Arabic side laid out
|
|||||||
- [Path A — manual setup](#path-a--manual-setup)
|
- [Path A — manual setup](#path-a--manual-setup)
|
||||||
- [Path B — Docker](#path-b--docker)
|
- [Path B — Docker](#path-b--docker)
|
||||||
- [Available scripts](#available-scripts)
|
- [Available scripts](#available-scripts)
|
||||||
|
- [Seeding content](#seeding-content)
|
||||||
- [Design tokens](#design-tokens)
|
- [Design tokens](#design-tokens)
|
||||||
- [Bilingual EN / AR](#bilingual-en--ar)
|
- [Bilingual EN / AR](#bilingual-en--ar)
|
||||||
- [Adding a content type, end to end](#adding-a-content-type-end-to-end)
|
- [Adding a content type, end to end](#adding-a-content-type-end-to-end)
|
||||||
@@ -468,7 +469,8 @@ docker run --rm -v sharper_cms-uploads:/data -v "$PWD":/backup alpine \
|
|||||||
| `pnpm dev:cms` | `strapi develop` (auto-reloads on schema changes) → `http://localhost:1337` |
|
| `pnpm dev:cms` | `strapi develop` (auto-reloads on schema changes) → `http://localhost:1337` |
|
||||||
| `pnpm build` | builds the CMS, then the web app (that order: the web build has no CMS dependency, but a broken CMS build should fail first) |
|
| `pnpm build` | builds the CMS, then the web app (that order: the web build has no CMS dependency, but a broken CMS build should fail first) |
|
||||||
| `pnpm start` | runs both production builds |
|
| `pnpm start` | runs both production builds |
|
||||||
| `pnpm typecheck` | the web app's `react-router typegen && tsc` (the CMS has no `typecheck` script — its TypeScript is checked by `strapi build`) |
|
| `pnpm seed` | writes the approved content into the CMS — see [Seeding content](#seeding-content) |
|
||||||
|
| `pnpm typecheck` | `tsc` in both applications, preceded in the web app by `react-router typegen` |
|
||||||
|
|
||||||
**`apps/web`** — run with `pnpm --filter web <script>`:
|
**`apps/web`** — run with `pnpm --filter web <script>`:
|
||||||
|
|
||||||
@@ -486,6 +488,7 @@ docker run --rm -v sharper_cms-uploads:/data -v "$PWD":/backup alpine \
|
|||||||
| `develop` / `dev` | `strapi develop` — the only mode in which the Content-Type Builder can write schemas |
|
| `develop` / `dev` | `strapi develop` — the only mode in which the Content-Type Builder can write schemas |
|
||||||
| `build` | builds the admin panel and compiles the TypeScript server into `dist/` |
|
| `build` | builds the admin panel and compiles the TypeScript server into `dist/` |
|
||||||
| `start` | `strapi start` — production mode; the Content-Type Builder is disabled |
|
| `start` | `strapi start` — production mode; the Content-Type Builder is disabled |
|
||||||
|
| `seed` | writes the CMS content — `pnpm --filter cms seed -- --demo` to include the fixtures |
|
||||||
| `console` | a REPL with `strapi` in scope, for one-off data fixes |
|
| `console` | a REPL with `strapi` in scope, for one-off data fixes |
|
||||||
| `strapi` | the CLI itself, e.g. `pnpm --filter cms exec strapi admin:create-user` |
|
| `strapi` | the CLI itself, e.g. `pnpm --filter cms exec strapi admin:create-user` |
|
||||||
| `upgrade` / `upgrade:dry` | `@strapi/upgrade` codemods for a minor/major version bump |
|
| `upgrade` / `upgrade:dry` | `@strapi/upgrade` codemods for a minor/major version bump |
|
||||||
@@ -500,6 +503,73 @@ docker run --rm -v sharper_cms-uploads:/data -v "$PWD":/backup alpine \
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Seeding content
|
||||||
|
|
||||||
|
A fresh database has an empty CMS, so every page renders its fallback copy and
|
||||||
|
every listing renders its empty state. `pnpm seed` fills it in. Both
|
||||||
|
applications can stay running while it does — it talks to PostgreSQL directly
|
||||||
|
and never opens a port of its own.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm seed # the approved content
|
||||||
|
pnpm seed -- --demo # the same, plus fixtures to look at
|
||||||
|
pnpm seed -- --demo --clean # remove those fixtures again
|
||||||
|
```
|
||||||
|
|
||||||
|
> The `--` is pnpm's, not the seed's. Running it from `apps/cms` (`pnpm seed
|
||||||
|
> --demo`) needs no separator.
|
||||||
|
|
||||||
|
**It is safe to run twice.** 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 — your own edits to other fields survive. It deletes nothing except on
|
||||||
|
`--demo --clean`. It uploads nothing: where a page already has a picture, the
|
||||||
|
existing file is read back and written out again with the new copy.
|
||||||
|
|
||||||
|
### The approved set — `apps/cms/src/seed/approved.ts`
|
||||||
|
|
||||||
|
Transcribed from `docs/`, in both languages, and safe to publish: the site
|
||||||
|
settings, the three consortium members, the topic taxonomy, the five activity
|
||||||
|
streams, the launch article, and the About, What We Do, Contact and Home
|
||||||
|
pages.
|
||||||
|
|
||||||
|
What `docs/` does not supply is not written. There are no statistics anywhere
|
||||||
|
(the source marks every number "TBD — must not be published until confirmed"),
|
||||||
|
no project email, no Facebook URL and no consortium addresses, because the
|
||||||
|
source writes all of those as bracketed placeholders. Two fields are judgement
|
||||||
|
calls and say so at the line: every activity's `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 the project's
|
||||||
|
own December 2025 – December 2027 window that is 2026 and no other year.
|
||||||
|
|
||||||
|
### The demo set — `apps/cms/src/seed/demo.ts`
|
||||||
|
|
||||||
|
Invented content: twelve network organisations, six articles, six events, four
|
||||||
|
opportunities, six resources, six knowledge items, eight questions and five
|
||||||
|
regions, across the calendar and across every enum value, so the listings,
|
||||||
|
filters, detail pages and the home page's logo marquee have something in them.
|
||||||
|
|
||||||
|
It is kept apart from real content three ways:
|
||||||
|
|
||||||
|
1. **Opt-in.** `pnpm seed` never writes it.
|
||||||
|
2. **Refused in production.** With `NODE_ENV=production` the seed exits with an
|
||||||
|
error rather than writing a fixture, whatever flags it is given.
|
||||||
|
3. **Tagged in the data.** Every demo slug starts `demo-`, so it is visible in
|
||||||
|
every URL — `/en/news-and-updates/demo-…` — and `--demo --clean` finds them
|
||||||
|
again by that prefix alone, with nothing remembered between runs.
|
||||||
|
|
||||||
|
### After seeding
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -s "http://localhost:1337/api/news-articles?locale=ar" | head -c 200
|
||||||
|
```
|
||||||
|
|
||||||
|
Then the home page at `http://localhost:5173/en` and `/ar`: the hero carries the
|
||||||
|
CMS headline, the newsroom band has cards, and — with `--demo` — the network
|
||||||
|
logo wall becomes the marquee, which needs at least eight partners before it
|
||||||
|
stops being a grid.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Design tokens
|
## Design tokens
|
||||||
|
|
||||||
Two tiers, so re-branding is a one-line edit in one file.
|
Two tiers, so re-branding is a one-line edit in one file.
|
||||||
|
|||||||
@@ -8,6 +8,7 @@
|
|||||||
"console": "strapi console",
|
"console": "strapi console",
|
||||||
"deploy": "strapi deploy",
|
"deploy": "strapi deploy",
|
||||||
"dev": "strapi develop",
|
"dev": "strapi develop",
|
||||||
|
"seed": "node --env-file-if-exists=.env ./scripts/seed.js",
|
||||||
"develop": "strapi develop",
|
"develop": "strapi develop",
|
||||||
"start": "strapi start",
|
"start": "strapi start",
|
||||||
"strapi": "strapi",
|
"strapi": "strapi",
|
||||||
|
|||||||
@@ -0,0 +1,75 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SEED RUNNER
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Boots Strapi far enough to use the document service, runs src/seed, and
|
||||||
|
shuts it down again. It does NOT start a server: nothing listens on a port,
|
||||||
|
so it is safe to run while `pnpm dev:cms` is up - both talk to the same
|
||||||
|
PostgreSQL database.
|
||||||
|
|
||||||
|
`compileStrapi()` is Strapi's own TypeScript build step. It compiles
|
||||||
|
src/** (the seed included) into dist/, which is why this file is plain
|
||||||
|
CommonJS JavaScript and everything it calls is TypeScript.
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
pnpm seed
|
||||||
|
pnpm seed --demo
|
||||||
|
pnpm seed --demo --clean
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const { compileStrapi, createStrapi } = require('@strapi/strapi');
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const appContext = await compileStrapi();
|
||||||
|
const app = await createStrapi(appContext).load();
|
||||||
|
|
||||||
|
/* Required from dist, not from src: the file below is TypeScript, and what
|
||||||
|
`compileStrapi()` just produced is the JavaScript for it. */
|
||||||
|
const { runSeed, parseSeedOptions } = require('../dist/src/seed');
|
||||||
|
|
||||||
|
try {
|
||||||
|
await runSeed(app, parseSeedOptions(process.argv.slice(2)));
|
||||||
|
} finally {
|
||||||
|
await shutdown(app);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shut Strapi down without letting the shutdown fail the run.
|
||||||
|
*
|
||||||
|
* Knex tears its connection pool down by aborting every acquisition still
|
||||||
|
* pending on it, and each abort rejects a promise that nothing is waiting on -
|
||||||
|
* so it arrives as an unhandled rejection reading "aborted" rather than as an
|
||||||
|
* error this function could simply catch. Everything the seed wrote is
|
||||||
|
* committed long before this point, so those are absorbed for the length of
|
||||||
|
* the shutdown and nothing else is: a seed that worked must not report itself
|
||||||
|
* as a seed that failed, and a real error must still say so.
|
||||||
|
*/
|
||||||
|
async function shutdown(app) {
|
||||||
|
const absorbAbort = (reason) => {
|
||||||
|
const message = reason instanceof Error ? reason.message : String(reason);
|
||||||
|
if (message !== 'aborted') {
|
||||||
|
console.warn(`[seed] while shutting down: ${message}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
process.on('unhandledRejection', absorbAbort);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await app.destroy();
|
||||||
|
} catch (error) {
|
||||||
|
const message = error instanceof Error ? error.message : String(error);
|
||||||
|
console.warn(`[seed] Strapi did not shut down cleanly (${message}). The data is written.`);
|
||||||
|
} finally {
|
||||||
|
process.off('unhandledRejection', absorbAbort);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.then(() => process.exit(0))
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error instanceof Error ? error.message : error);
|
||||||
|
if (error instanceof Error && error.stack) console.error(error.stack);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
@@ -39,7 +39,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -58,7 +58,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -26,10 +26,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"stats": {
|
"approach": {
|
||||||
"type": "component",
|
"type": "component",
|
||||||
"repeatable": true,
|
"repeatable": false,
|
||||||
"component": "shared.stat",
|
"component": "page.band-intro",
|
||||||
"pluginOptions": {
|
"pluginOptions": {
|
||||||
"i18n": {
|
"i18n": {
|
||||||
"localized": true
|
"localized": true
|
||||||
@@ -41,7 +41,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -58,7 +58,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -58,7 +58,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -67,7 +67,6 @@
|
|||||||
"components": [
|
"components": [
|
||||||
"blocks.rich-text",
|
"blocks.rich-text",
|
||||||
"blocks.image-gallery",
|
"blocks.image-gallery",
|
||||||
"blocks.stats-grid",
|
|
||||||
"blocks.cta-banner",
|
"blocks.cta-banner",
|
||||||
"blocks.card-grid",
|
"blocks.card-grid",
|
||||||
"blocks.quote",
|
"blocks.quote",
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"collectionName": "components_blocks_stats_grids",
|
|
||||||
"info": {
|
|
||||||
"displayName": "Stats Grid",
|
|
||||||
"icon": "chartBubble",
|
|
||||||
"description": "A grid of headline figures."
|
|
||||||
},
|
|
||||||
"options": {},
|
|
||||||
"attributes": {
|
|
||||||
"stats": {
|
|
||||||
"type": "component",
|
|
||||||
"repeatable": true,
|
|
||||||
"component": "shared.stat"
|
|
||||||
},
|
|
||||||
"note": {
|
|
||||||
"type": "text"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"collectionName": "components_page_band_intros",
|
||||||
|
"info": {
|
||||||
|
"displayName": "Band intro",
|
||||||
|
"icon": "layer",
|
||||||
|
"description": "The heading, lead and pictures of a page band, in one place so an editor is not hunting for half of it in the Blocks zone."
|
||||||
|
},
|
||||||
|
"options": {},
|
||||||
|
"attributes": {
|
||||||
|
"eyebrow": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"heading": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"lead": {
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
"images": {
|
||||||
|
"type": "media",
|
||||||
|
"multiple": true,
|
||||||
|
"required": false,
|
||||||
|
"allowedTypes": [
|
||||||
|
"images"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"collectionName": "components_shared_stats",
|
|
||||||
"info": {
|
|
||||||
"displayName": "Stat",
|
|
||||||
"icon": "chartBubble",
|
|
||||||
"description": "A single headline figure, e.g. 64 / CSO Partners."
|
|
||||||
},
|
|
||||||
"options": {},
|
|
||||||
"attributes": {
|
|
||||||
"value": {
|
|
||||||
"type": "string",
|
|
||||||
"required": true
|
|
||||||
},
|
|
||||||
"label": {
|
|
||||||
"type": "string",
|
|
||||||
"required": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,706 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SEED - APPROVED CONTENT
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Everything in this file is transcribed from docs/, in both languages, and
|
||||||
|
nothing in it is invented. That is the whole point of keeping it apart from
|
||||||
|
demo.ts: this content is safe to publish.
|
||||||
|
|
||||||
|
SOURCES
|
||||||
|
docs/SHARPER_Website_Draft_Section_EN_AR.docx sections 1-9, EN and AR
|
||||||
|
columns, which is why no
|
||||||
|
Arabic string here is a
|
||||||
|
machine translation
|
||||||
|
docs/SHARPER Home Page .docx the launch article, EN/AR
|
||||||
|
docs/UEC_SHARPER_Website_TOR V3.docx the consortium and the
|
||||||
|
project's purpose
|
||||||
|
|
||||||
|
WHAT docs/ DOES NOT SUPPLY, AND IS THEREFORE NOT HERE
|
||||||
|
* Figures. Every number in the draft is bracketed and marked "TBD ... must
|
||||||
|
not be published until confirmed". There is no figures band on the site
|
||||||
|
and no `stats` component in the CMS - both were removed rather than left
|
||||||
|
as an empty invitation to fill one in.
|
||||||
|
* The project email. The draft writes it "[project email - e.g.
|
||||||
|
info@sharper.ly]", an example rather than an address, so
|
||||||
|
`contact-page.generalEmail` is left empty.
|
||||||
|
* The Facebook URL and the SHARP-legacy link. Both are bracketed
|
||||||
|
placeholders, and `shared.link` requires an href, so neither link is
|
||||||
|
written at all rather than written to nowhere.
|
||||||
|
* Consortium postal addresses - "[addresses/contacts TBD]".
|
||||||
|
* Any CSO partner, event, resource or question. The draft's examples are
|
||||||
|
all written "[CSO Name]", "[Date]", "[Report title]". Those live in
|
||||||
|
demo.ts and are opt-in.
|
||||||
|
|
||||||
|
THE TWO JUDGEMENT CALLS, BOTH FLAGGED AT THEIR FIELD
|
||||||
|
* `activityStatus` is required by the schema and the draft states no
|
||||||
|
status per activity stream.
|
||||||
|
* The launch article's year is derived, not given.
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
import type { Localised, SeedData } from './upsert';
|
||||||
|
|
||||||
|
/** Slug -> content, for the collection types the approved set writes. */
|
||||||
|
export type SeedEntries = ReadonlyArray<{
|
||||||
|
readonly slug: string;
|
||||||
|
readonly data: Localised<SeedData>;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
SITE SETTINGS
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const SITE_SETTINGS: Localised<SeedData> = {
|
||||||
|
en: {
|
||||||
|
siteName: 'SHARP-ER',
|
||||||
|
tagline: 'Shared Action on Rule of Law Progress – Exit Route',
|
||||||
|
euFundingStatement: 'Funded by the European Union',
|
||||||
|
implementedByLabel: 'Implemented by',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
siteName: 'SHARP-ER',
|
||||||
|
tagline: 'العمل المشترك لتعزيز سيادة القانون – مسار الخروج',
|
||||||
|
euFundingStatement: 'بتمويل من الاتحاد الأوروبي',
|
||||||
|
implementedByLabel: 'ينفّذه',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
THE CONSORTIUM
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Draft section 1 writes each member as "<name> - <role> - <deliverable>".
|
||||||
|
The Latin names are kept in the Arabic column exactly as the draft keeps
|
||||||
|
them. No website is seeded: the draft names none.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const CONSORTIUM: SeedEntries = [
|
||||||
|
{
|
||||||
|
slug: 'acted',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Acted',
|
||||||
|
slug: 'acted',
|
||||||
|
partnerRole: 'consortium-lead',
|
||||||
|
description:
|
||||||
|
'Lead implementing partner — overall project management and civil society sub-projects.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'Acted',
|
||||||
|
slug: 'acted',
|
||||||
|
partnerRole: 'consortium-lead',
|
||||||
|
description: 'الشريك المنفّذ الرئيسي — الإدارة العامة للمشروع والمشاريع الفرعية لمنظمات المجتمع المدني.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'united-efforts-consultancy',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'United Efforts Consultancy (UEC)',
|
||||||
|
slug: 'united-efforts-consultancy',
|
||||||
|
partnerRole: 'consortium-partner',
|
||||||
|
description: 'Network strengthening, dialogue, and peer-learning.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'United Efforts Consultancy (UEC)',
|
||||||
|
slug: 'united-efforts-consultancy',
|
||||||
|
partnerRole: 'consortium-partner',
|
||||||
|
description: 'تعزيز الشبكة، والحوار، والتعلّم بين الأقران.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'stichting-bureau-ensemble',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Stichting Bureau Ensemble (SBE)',
|
||||||
|
slug: 'stichting-bureau-ensemble',
|
||||||
|
partnerRole: 'consortium-partner',
|
||||||
|
description: 'Research, perception data, and knowledge publications.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'Stichting Bureau Ensemble (SBE)',
|
||||||
|
slug: 'stichting-bureau-ensemble',
|
||||||
|
partnerRole: 'consortium-partner',
|
||||||
|
description: 'البحث، وبيانات الاستطلاع، والمنشورات المعرفية.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Slugs, so later steps can wire relations without repeating the strings. */
|
||||||
|
export const PARTNER_SLUGS = {
|
||||||
|
acted: 'acted',
|
||||||
|
uec: 'united-efforts-consultancy',
|
||||||
|
sbe: 'stichting-bureau-ensemble',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
TOPICS
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
The taxonomy the site filters by. Each name and description is one of the
|
||||||
|
draft's own area headings - the three pillars of section 1 and two of the
|
||||||
|
five activity streams of section 3 - so the vocabulary is the project's,
|
||||||
|
not one this seed made up.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const TOPICS: SeedEntries = [
|
||||||
|
{
|
||||||
|
slug: 'rule-of-law',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Rule of Law',
|
||||||
|
slug: 'rule-of-law',
|
||||||
|
description:
|
||||||
|
'Supporting local institutions to improve access to justice and transparency.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'سيادة القانون',
|
||||||
|
slug: 'rule-of-law',
|
||||||
|
description: 'دعم المؤسسات المحلية لتحسين الوصول إلى العدالة وتعزيز الشفافية.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'civil-society',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Civil Society',
|
||||||
|
slug: 'civil-society',
|
||||||
|
description:
|
||||||
|
'Building the capacity of CSOs to strengthen their role in oversight and accountability.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'المجتمع المدني',
|
||||||
|
slug: 'civil-society',
|
||||||
|
description: 'بناء قدرات منظمات المجتمع المدني لتعزيز دورها في الرقابة والمساءلة.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'local-governance',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Local Governance',
|
||||||
|
slug: 'local-governance',
|
||||||
|
description:
|
||||||
|
'Enhancing collaboration between municipalities and local actors to improve service delivery.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'الحوكمة المحلية',
|
||||||
|
slug: 'local-governance',
|
||||||
|
description: 'تعزيز التعاون بين البلديات والجهات الفاعلة المحلية لتحسين تقديم الخدمات.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'dialogue',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Dialogue',
|
||||||
|
slug: 'dialogue',
|
||||||
|
description:
|
||||||
|
'SUQ dialogues and Civil Society Law Sessions that bring civic and government actors to the same table.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'الحوار',
|
||||||
|
slug: 'dialogue',
|
||||||
|
description: 'حوارات SUQ وجلسات قانون المجتمع المدني التي تجمع الفاعلين المدنيين والحكوميين حول طاولة واحدة.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'human-security',
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
name: 'Human Security',
|
||||||
|
slug: 'human-security',
|
||||||
|
description: 'Sub-projects designed to foster human security at the community level.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
name: 'الأمن البشري',
|
||||||
|
slug: 'human-security',
|
||||||
|
description: 'مشاريع فرعية مصمَّمة لتعزيز الأمن البشري على المستوى المجتمعي.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const TOPIC_SLUGS = {
|
||||||
|
ruleOfLaw: 'rule-of-law',
|
||||||
|
civilSociety: 'civil-society',
|
||||||
|
localGovernance: 'local-governance',
|
||||||
|
dialogue: 'dialogue',
|
||||||
|
humanSecurity: 'human-security',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
ACTIVITIES - draft section 3
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Five streams, and the draft names all five along with the partner that
|
||||||
|
implements each. They map one-to-one onto the `activityStream` enum, which
|
||||||
|
is where that enum came from.
|
||||||
|
|
||||||
|
`activityStatus` is the one field with no source. The schema requires it and
|
||||||
|
the draft states no status per stream, so every activity is seeded
|
||||||
|
`ongoing`: the draft heads the section "here's where the project stands
|
||||||
|
today" and describes all five in the present tense. It is a default for
|
||||||
|
editors to correct, not a claim from docs/.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
const activity = (
|
||||||
|
slug: string,
|
||||||
|
stream: string,
|
||||||
|
partners: readonly string[],
|
||||||
|
topics: readonly string[],
|
||||||
|
en: { title: string; summary: string },
|
||||||
|
ar: { title: string; summary: string }
|
||||||
|
) => ({
|
||||||
|
slug,
|
||||||
|
partners,
|
||||||
|
topics,
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
title: en.title,
|
||||||
|
slug,
|
||||||
|
summary: en.summary,
|
||||||
|
activityStream: stream,
|
||||||
|
activityStatus: 'ongoing',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
title: ar.title,
|
||||||
|
slug,
|
||||||
|
summary: ar.summary,
|
||||||
|
activityStream: stream,
|
||||||
|
activityStatus: 'ongoing',
|
||||||
|
},
|
||||||
|
} satisfies Localised<SeedData>,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const ACTIVITIES = [
|
||||||
|
activity(
|
||||||
|
'the-sharp-network',
|
||||||
|
'sharp-network',
|
||||||
|
[PARTNER_SLUGS.uec],
|
||||||
|
[TOPIC_SLUGS.civilSociety],
|
||||||
|
{
|
||||||
|
title: 'The SHARP Network',
|
||||||
|
summary:
|
||||||
|
'Regional meetings, international events, and peer-to-peer learning that keep the civil society network connected.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'شبكة SHARP',
|
||||||
|
summary: 'اجتماعات إقليمية وفعاليات دولية وتعلّم بين الأقران تُبقي شبكة المجتمع المدني على تواصل.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
activity(
|
||||||
|
'cso-sub-projects-and-policy-to-rights',
|
||||||
|
'cso-subprojects-p2r',
|
||||||
|
[PARTNER_SLUGS.acted],
|
||||||
|
[TOPIC_SLUGS.civilSociety, TOPIC_SLUGS.ruleOfLaw],
|
||||||
|
{
|
||||||
|
title: 'CSO Sub-Projects & Policy-to-Rights',
|
||||||
|
summary:
|
||||||
|
'Collective sub-projects selected through open Calls for Expression of Interest, fostering cross-country cooperation, plus Policy-to-Rights (P2R) projects.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'المشاريع الفرعية لمنظمات المجتمع المدني ومشاريع P2R',
|
||||||
|
summary:
|
||||||
|
'مشاريع فرعية جماعية تُختار عبر دعوات مفتوحة للتعبير عن الاهتمام لتعزيز التعاون العابر للمناطق، إضافة إلى مشاريع “من السياسة إلى الحقوق”.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
activity(
|
||||||
|
'suq-dialogues-and-civil-society-law-sessions',
|
||||||
|
'suq-dialogues',
|
||||||
|
[PARTNER_SLUGS.uec, PARTNER_SLUGS.acted],
|
||||||
|
[TOPIC_SLUGS.dialogue, TOPIC_SLUGS.ruleOfLaw],
|
||||||
|
{
|
||||||
|
title: 'SUQ Dialogues & Civil Society Law Sessions',
|
||||||
|
summary:
|
||||||
|
'Search, Understand, Question (SUQ) dialogues driven by local needs, dialogue-facilitation training, and joint sessions with the Commission on Civil Society (CCS).',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'حوارات SUQ وجلسات قانون المجتمع المدني',
|
||||||
|
summary:
|
||||||
|
'حوارات “ابحث، افهم، اسأل” (SUQ) مدفوعة باحتياجات محلية، وتدريب على تيسير الحوار، وجلسات مشتركة مع لجنة المجتمع المدني (CCS).',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
activity(
|
||||||
|
'human-security-initiatives',
|
||||||
|
'human-security',
|
||||||
|
[PARTNER_SLUGS.uec],
|
||||||
|
[TOPIC_SLUGS.humanSecurity],
|
||||||
|
{
|
||||||
|
title: 'Human Security Initiatives',
|
||||||
|
summary:
|
||||||
|
'16 individual sub-projects designed to foster human security at the community level.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'مبادرات الأمن البشري',
|
||||||
|
summary: '16 مشروعًا فرديًا فرعيًا مصمَّمًا لتعزيز الأمن البشري على المستوى المجتمعي.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
activity(
|
||||||
|
'research-and-perception-data',
|
||||||
|
'research',
|
||||||
|
[PARTNER_SLUGS.sbe],
|
||||||
|
[TOPIC_SLUGS.localGovernance],
|
||||||
|
{
|
||||||
|
title: 'Research & Perception Data',
|
||||||
|
summary: 'Nationwide perception-based data collection, analysis, and dissemination.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'البحث وبيانات الاستطلاع',
|
||||||
|
summary: 'جمع بيانات استطلاعية على المستوى الوطني وتحليلها ونشرها.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
THE LAUNCH ARTICLE - docs/SHARPER Home Page .docx
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
The one piece of real news the project has handed over, written out in full
|
||||||
|
in both languages.
|
||||||
|
|
||||||
|
THE DATE: the document says "Tuesday, June 30" and gives no year. Within the
|
||||||
|
project's own window - December 2025 to December 2027 - 30 June falls on a
|
||||||
|
Tuesday in 2026 and in no other year, so 2026-06-30 is derived from the
|
||||||
|
source rather than chosen.
|
||||||
|
|
||||||
|
The source's closing line ("Visit the SHARP-ER website and follow our social
|
||||||
|
media channels...") is left out: it addresses a reader on social media and
|
||||||
|
asks them to come to this site, which is not something to print on it.
|
||||||
|
|
||||||
|
No `authorOrganisation`: the document attributes the article to no one, and
|
||||||
|
a byline is not a thing to guess at.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
const LAUNCH_SLUG = 'sharp-er-project-officially-launches-in-libya';
|
||||||
|
|
||||||
|
export const LAUNCH_ARTICLE = {
|
||||||
|
slug: LAUNCH_SLUG,
|
||||||
|
topics: [TOPIC_SLUGS.civilSociety, TOPIC_SLUGS.ruleOfLaw],
|
||||||
|
data: {
|
||||||
|
en: {
|
||||||
|
title: 'SHARP-ER Project Officially Launches in Libya',
|
||||||
|
slug: LAUNCH_SLUG,
|
||||||
|
category: 'sharper-news',
|
||||||
|
publishDate: '2026-06-30',
|
||||||
|
featured: true,
|
||||||
|
excerpt:
|
||||||
|
'The launch brought together the European Union Delegation, three ministries, civil society organisations, partners and stakeholders from across Libya, and opened the Expression of Interest.',
|
||||||
|
body: [
|
||||||
|
'On Tuesday, June 30, the SHARP-ER project officially launched, bringing together representatives from the European Union Delegation, the Ministry of Youth, the Ministry of Local Governance, the Ministry of Women’s Affairs, civil society organizations, partners, and stakeholders from across Libya.',
|
||||||
|
'The event marked an important start for the project, including the launch of the SHARP-ER website and the opening of the Expression of Interest (EOI). Participants also learned more about the project’s objectives, upcoming opportunities, and activities focused on strengthening collaboration, partnerships, and local capacities.',
|
||||||
|
'Thank you to everyone who joined us and contributed to this milestone. We look forward to working together to support locally driven initiatives and create meaningful, lasting impact across Libya.',
|
||||||
|
'This project is funded by the European Union in Libya.',
|
||||||
|
].join('\n\n'),
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
title: 'انطلاق مشروع SHARP-ER رسميًا في ليبيا',
|
||||||
|
slug: LAUNCH_SLUG,
|
||||||
|
category: 'sharper-news',
|
||||||
|
publishDate: '2026-06-30',
|
||||||
|
featured: true,
|
||||||
|
excerpt:
|
||||||
|
'جمعت فعالية الإطلاق بعثة الاتحاد الأوروبي وثلاث وزارات ومنظمات المجتمع المدني والشركاء وأصحاب المصلحة من مختلف أنحاء ليبيا، وشهدت فتح باب التعبير عن الاهتمام.',
|
||||||
|
body: [
|
||||||
|
'انطلقت يوم الثلاثاء 30 يونيو رسميًا فعاليات مشروع SHARP-ER خلال حدث الإطلاق الذي جمع ممثلين عن بعثة الاتحاد الأوروبي، ووزارة الشباب، ووزارة الحكم المحلي، ووزارة شؤون المرأة، إلى جانب منظمات المجتمع المدني والشركاء والجهات الفاعلة من مختلف أنحاء ليبيا.',
|
||||||
|
'وشكّل الحدث بداية مهمة للمشروع، حيث تم إطلاق الموقع الإلكتروني الرسمي، والإعلان عن فتح باب التعبير عن الاهتمام (EOI)، إلى جانب استعراض أهداف المشروع والفرص والأنشطة القادمة. وتركّز هذه الأنشطة على تعزيز التعاون والشراكات وبناء القدرات على المستوى المحلي.',
|
||||||
|
'نتوجه بالشكر إلى جميع المشاركين على حضورهم ومساهماتهم القيّمة. ونتطلع إلى العمل معًا خلال المرحلة المقبلة لدعم المبادرات المحلية وتحقيق أثر مستدام في مختلف أنحاء ليبيا.',
|
||||||
|
'المشروع ممول من الاتحاد الأوروبي في ليبيا.',
|
||||||
|
].join('\n\n'),
|
||||||
|
},
|
||||||
|
} satisfies Localised<SeedData>,
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
PAGES
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
The single types. Each hero, body and component list below is the draft's
|
||||||
|
own wording for that section; the home page's hero is the Claude Design
|
||||||
|
draft's, which is the same content the web app bundles as its fallback, so
|
||||||
|
the CMS and the fallback say the same thing rather than drifting apart.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const HOME_PAGE: Localised<SeedData> = {
|
||||||
|
en: {
|
||||||
|
hero: {
|
||||||
|
/* No `eyebrow`. The design draws a status pill reading "Now open -
|
||||||
|
Funding calls for Libyan organisations"; whether a call is open on any
|
||||||
|
given day is a fact about the project, not about the design, so the
|
||||||
|
pill stays unwritten until an editor writes it. */
|
||||||
|
headline: 'Advancing Justice and Accountability, Led by Libyan Communities',
|
||||||
|
subheading:
|
||||||
|
'SHARP-ER — Shared Action on Rule of Law Progress, Exit Route — works with civil society organisations, municipalities, and community leaders across Libya to strengthen access to justice, accountability, and local governance. Funded by the European Union, running to December 2027.',
|
||||||
|
},
|
||||||
|
/* The band under the hero. Seeded so an editor opening Home Page finds the
|
||||||
|
words already in a field they can change, rather than wondering where
|
||||||
|
the page is getting them from - the web app still falls back to the
|
||||||
|
bundled draft copy if this is ever emptied. `images` is left alone: the
|
||||||
|
seed uploads nothing. */
|
||||||
|
approach: {
|
||||||
|
eyebrow: 'Nationwide, Libya',
|
||||||
|
heading: 'A nationwide project, delivered locally',
|
||||||
|
lead: 'Local organisations lead the design and delivery of the work. SHARP-ER partners with Libyan civil society, municipalities, and community leaders — through funded sub-projects, training, and open dialogue between communities and the institutions that serve them.',
|
||||||
|
},
|
||||||
|
partnersHeadline: 'The consortium',
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'SHARP-ER — Shared Action on Rule of Law Progress, Exit Route',
|
||||||
|
metaDescription:
|
||||||
|
'A nationwide initiative supporting Libya’s civil society, local institutions, and communities in advancing justice, accountability, and good governance.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
hero: {
|
||||||
|
headline: 'تعزيز العدالة والمساءلة بقيادة المجتمعات الليبية',
|
||||||
|
subheading:
|
||||||
|
'يعمل SHARP-ER — العمل المشترك لتعزيز سيادة القانون، مسار الخروج — مع منظمات المجتمع المدني والبلديات وقادة المجتمعات في مختلف أنحاء ليبيا على تعزيز الوصول إلى العدالة والمساءلة والحوكمة المحلية. بتمويل من الاتحاد الأوروبي، ويستمر حتى ديسمبر 2027.',
|
||||||
|
},
|
||||||
|
approach: {
|
||||||
|
eyebrow: 'على مستوى ليبيا بأكملها',
|
||||||
|
heading: 'مشروع وطني يُنفَّذ محليًا',
|
||||||
|
lead: 'تتولّى المنظمات المحلية تصميم العمل وتنفيذه. ويعمل SHARP-ER بالشراكة مع المجتمع المدني الليبي والبلديات وقادة المجتمعات، من خلال المشاريع الفرعية المموَّلة، والتدريب، والحوار المفتوح بين المجتمعات والمؤسسات التي تخدمها.',
|
||||||
|
},
|
||||||
|
partnersHeadline: 'الائتلاف المنفّذ',
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'SHARP-ER — العمل المشترك لتعزيز سيادة القانون، مسار الخروج',
|
||||||
|
metaDescription:
|
||||||
|
'مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات في ليبيا في تعزيز العدالة والمساءلة والحوكمة الرشيدة.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The About page. `consortium` is built in index.ts, where the partner
|
||||||
|
* documentIds are known; everything else is here.
|
||||||
|
*/
|
||||||
|
export const ABOUT_PAGE: Localised<SeedData> = {
|
||||||
|
en: {
|
||||||
|
hero: {
|
||||||
|
eyebrow: 'About the project',
|
||||||
|
headline: 'Strengthening the Rule of Law, Together',
|
||||||
|
subheading:
|
||||||
|
'SHARP-ER (Shared Action on Rule of Law Progress – Exit Route) is a nationwide initiative supporting Libya’s civil society, local institutions, and communities in advancing justice, accountability, and good governance.',
|
||||||
|
},
|
||||||
|
body: [
|
||||||
|
'Running from December 2025 to December 2027, SHARP-ER is implemented by Acted, in consortium with United Efforts Consultancy (UEC) and Stichting Bureau Ensemble (SBE), and funded by the European Union. The project works nationwide across Libya, partnering with civil society organisations, municipalities, and community leaders to strengthen access to justice, build the capacity of civil society to hold institutions accountable, and improve local governance and service delivery.',
|
||||||
|
].join('\n\n'),
|
||||||
|
pillars: [
|
||||||
|
{
|
||||||
|
title: 'Strengthening Rule of Law',
|
||||||
|
description:
|
||||||
|
'Supporting local institutions to improve access to justice and transparency.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Empowering Civil Society',
|
||||||
|
description:
|
||||||
|
'Building the capacity of CSOs to strengthen their role in oversight and accountability.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Supporting Local Governance',
|
||||||
|
description:
|
||||||
|
'Enhancing collaboration between municipalities and local actors to improve service delivery.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legacyHeadline: 'SHARP I and II (2019–2024)',
|
||||||
|
legacyBody:
|
||||||
|
'SHARP-ER builds on the foundation of SHARP I and II (2019–2024), carrying its network of civil society partners and its dialogue practice into a new phase focused on sustainability and exit.',
|
||||||
|
/* No `legacyLink`: the draft marks the target "[link: read about the SHARP
|
||||||
|
legacy]" and gives no URL, and `shared.link` requires an href. */
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'About SHARP-ER',
|
||||||
|
metaDescription:
|
||||||
|
'SHARP-ER is implemented by Acted with United Efforts Consultancy and Stichting Bureau Ensemble, and funded by the European Union, from December 2025 to December 2027.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
hero: {
|
||||||
|
eyebrow: 'عن المشروع',
|
||||||
|
headline: 'نحو تعزيز سيادة القانون، معًا',
|
||||||
|
subheading:
|
||||||
|
'SHARP-ER (العمل المشترك لتعزيز سيادة القانون – مسار الخروج) هو مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات الليبية في تعزيز العدالة والمساءلة والحوكمة الرشيدة.',
|
||||||
|
},
|
||||||
|
body: [
|
||||||
|
'يمتد المشروع من ديسمبر 2025 إلى ديسمبر 2027، ويُنفَّذ من قِبل منظمة Acted بالشراكة مع United Efforts Consultancy (UEC) وStichting Bureau Ensemble (SBE)، وبتمويل من الاتحاد الأوروبي. يعمل المشروع على مستوى ليبيا بأكملها، بالتعاون مع منظمات المجتمع المدني والبلديات والقيادات المجتمعية، من أجل تحسين الوصول إلى العدالة، وبناء قدرات المجتمع المدني على مساءلة المؤسسات، وتحسين الحوكمة المحلية وتقديم الخدمات.',
|
||||||
|
].join('\n\n'),
|
||||||
|
pillars: [
|
||||||
|
{
|
||||||
|
title: 'تعزيز سيادة القانون',
|
||||||
|
description: 'دعم المؤسسات المحلية لتحسين الوصول إلى العدالة وتعزيز الشفافية.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'تمكين المجتمع المدني',
|
||||||
|
description: 'بناء قدرات منظمات المجتمع المدني لتعزيز دورها في الرقابة والمساءلة.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'دعم الحوكمة المحلية',
|
||||||
|
description: 'تعزيز التعاون بين البلديات والجهات الفاعلة المحلية لتحسين تقديم الخدمات.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legacyHeadline: 'مشروعا SHARP الأول والثاني (2019–2024)',
|
||||||
|
legacyBody:
|
||||||
|
'يبني SHARP-ER على الأساس الذي أرساه مشروعا SHARP الأول والثاني (2019–2024)، حاملًا معه شبكة الشركاء من المجتمع المدني وممارسة الحوار إلى مرحلة جديدة تركّز على الاستدامة ومسار الخروج.',
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'عن مشروع SHARP-ER',
|
||||||
|
metaDescription:
|
||||||
|
'يُنفَّذ SHARP-ER من قِبل Acted بالشراكة مع United Efforts Consultancy وStichting Bureau Ensemble، وبتمويل من الاتحاد الأوروبي، من ديسمبر 2025 إلى ديسمبر 2027.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/** The role chip and its line on the About page's consortium cards. */
|
||||||
|
export const CONSORTIUM_ROLES: Readonly<
|
||||||
|
Record<string, Localised<{ role: string; roleDescription: string }>>
|
||||||
|
> = {
|
||||||
|
[PARTNER_SLUGS.acted]: {
|
||||||
|
en: {
|
||||||
|
role: 'Lead implementing partner',
|
||||||
|
roleDescription: 'Overall project management and civil society sub-projects.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
role: 'الشريك المنفّذ الرئيسي',
|
||||||
|
roleDescription: 'الإدارة العامة للمشروع والمشاريع الفرعية لمنظمات المجتمع المدني.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[PARTNER_SLUGS.uec]: {
|
||||||
|
en: {
|
||||||
|
role: 'Consortium partner',
|
||||||
|
roleDescription: 'Network strengthening, dialogue, and peer-learning.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
role: 'شريك في الائتلاف',
|
||||||
|
roleDescription: 'تعزيز الشبكة، والحوار، والتعلّم بين الأقران.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[PARTNER_SLUGS.sbe]: {
|
||||||
|
en: {
|
||||||
|
role: 'Consortium partner',
|
||||||
|
roleDescription: 'Research, perception data, and knowledge publications.',
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
role: 'شريك في الائتلاف',
|
||||||
|
roleDescription: 'البحث، وبيانات الاستطلاع، والمنشورات المعرفية.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WHAT_WE_DO_PAGE: Localised<SeedData> = {
|
||||||
|
en: {
|
||||||
|
hero: {
|
||||||
|
headline: 'A Participatory Approach to Justice and Governance',
|
||||||
|
subheading: 'We work directly with civil society, municipalities, and communities — not around them.',
|
||||||
|
},
|
||||||
|
intro: 'SHARP-ER is organised around four connected areas of work.',
|
||||||
|
workstreams: [
|
||||||
|
{
|
||||||
|
title: 'Capacity Building',
|
||||||
|
description:
|
||||||
|
'Training civil society organisations and local actors on governance, justice, and management, and equipping the SHARP network with peer-to-peer learning.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Institutional Support',
|
||||||
|
description:
|
||||||
|
'Strengthening the systems, procedures, and dialogue channels that connect local institutions with the people they serve.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Community Initiatives',
|
||||||
|
description:
|
||||||
|
'Funding and supporting CSO-led sub-projects, Policy-to-Rights (P2R) projects, and human-security initiatives designed and driven by local actors.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dialogue and Coordination',
|
||||||
|
description:
|
||||||
|
'Running SUQ (Search, Understand, Question) dialogues and Civil Society Law Sessions that bring civic and government actors to the same table.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
/* The four clauses of the draft's "Our approach rests on four
|
||||||
|
principles..." sentence, and nothing else: the design gives each tile an
|
||||||
|
explanatory line that appears in no approved document. */
|
||||||
|
principles: [
|
||||||
|
{ title: 'Working with local actors' },
|
||||||
|
{ title: 'Promoting sustainable — not one-off — solutions' },
|
||||||
|
{ title: 'Connecting civil society with institutions' },
|
||||||
|
{ title: 'Supporting gradual, realistic institutional reform' },
|
||||||
|
],
|
||||||
|
guidingValues: [
|
||||||
|
'Dialogue',
|
||||||
|
'Community Leadership',
|
||||||
|
'Learning',
|
||||||
|
'Inclusion',
|
||||||
|
'Responsibility & Accountability',
|
||||||
|
],
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'What We Do — SHARP-ER',
|
||||||
|
metaDescription:
|
||||||
|
'Capacity building, institutional support, community initiatives, and dialogue and coordination: the four connected areas of work behind SHARP-ER.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
hero: {
|
||||||
|
headline: 'نهج تشاركي في العدالة والحوكمة',
|
||||||
|
subheading: 'نعمل مباشرة مع المجتمع المدني والبلديات والمجتمعات المحلية، لا من حولها.',
|
||||||
|
},
|
||||||
|
intro: 'يقوم عمل SHARP-ER على أربعة محاور مترابطة.',
|
||||||
|
workstreams: [
|
||||||
|
{
|
||||||
|
title: 'بناء القدرات',
|
||||||
|
description:
|
||||||
|
'تدريب منظمات المجتمع المدني والجهات المحلية على الحوكمة والعدالة والإدارة، وتزويد شبكة SHARP بالتعلّم بين الأقران.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'الدعم المؤسسي',
|
||||||
|
description: 'تعزيز الأنظمة والإجراءات وقنوات الحوار التي تربط المؤسسات المحلية بالمجتمعات التي تخدمها.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'المبادرات المجتمعية',
|
||||||
|
description:
|
||||||
|
'تمويل ودعم مشاريع فرعية تقودها منظمات المجتمع المدني، ومشاريع “من السياسة إلى الحقوق” (P2R)، ومبادرات الأمن البشري التي يصممها الفاعلون المحليون ويقودونها.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'الحوار والتنسيق',
|
||||||
|
description:
|
||||||
|
'تنظيم حوارات SUQ (ابحث، افهم، اسأل) وجلسات قانون المجتمع المدني التي تجمع الفاعلين المدنيين والحكوميين حول طاولة واحدة.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
principles: [
|
||||||
|
{ title: 'العمل مع الفاعلين المحليين' },
|
||||||
|
{ title: 'تعزيز الحلول المستدامة لا الآنية' },
|
||||||
|
{ title: 'الربط بين المجتمع المدني والمؤسسات' },
|
||||||
|
{ title: 'دعم إصلاح مؤسسي تدريجي وواقعي' },
|
||||||
|
],
|
||||||
|
guidingValues: ['الحوار', 'القيادة المجتمعية', 'التعلّم', 'الشمول', 'المساءلة والمسؤولية'],
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'ماذا نفعل — SHARP-ER',
|
||||||
|
metaDescription:
|
||||||
|
'بناء القدرات، والدعم المؤسسي، والمبادرات المجتمعية، والحوار والتنسيق: المحاور الأربعة المترابطة التي يقوم عليها عمل SHARP-ER.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CONTACT_PAGE: Localised<SeedData> = {
|
||||||
|
en: {
|
||||||
|
hero: {
|
||||||
|
headline: 'Get in Touch',
|
||||||
|
subheading: 'Questions about SHARP-ER, a partnership, or a specific activity? Reach out.',
|
||||||
|
},
|
||||||
|
intro: 'Questions about SHARP-ER, a partnership, or a specific activity? Reach out.',
|
||||||
|
websiteLabel: 'sharper.ly',
|
||||||
|
/* No `generalEmail`, no `socialLinks`, no `consortiumContacts`: the draft
|
||||||
|
writes all three as bracketed placeholders. */
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'Contact SHARP-ER',
|
||||||
|
metaDescription: 'Get in touch with the SHARP-ER consortium about the project, a partnership, or a specific activity.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
hero: {
|
||||||
|
headline: 'تواصل معنا',
|
||||||
|
subheading: 'لديك استفسار حول SHARP-ER، أو شراكة محتملة، أو نشاط معيّن؟ راسلنا.',
|
||||||
|
},
|
||||||
|
intro: 'لديك استفسار حول SHARP-ER، أو شراكة محتملة، أو نشاط معيّن؟ راسلنا.',
|
||||||
|
websiteLabel: 'sharper.ly',
|
||||||
|
seo: {
|
||||||
|
metaTitle: 'تواصل مع SHARP-ER',
|
||||||
|
metaDescription: 'تواصل مع ائتلاف SHARP-ER بشأن المشروع، أو شراكة محتملة، أو نشاط معيّن.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,925 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SEED - DEMO FIXTURES
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
INVENTED CONTENT. Nothing in this file comes from docs/ and nothing in it is
|
||||||
|
true. It exists so the listings, filters, cards, empty states and the logo
|
||||||
|
marquee can be looked at with something in them, on a development machine.
|
||||||
|
|
||||||
|
HOW IT IS KEPT APART FROM REAL CONTENT
|
||||||
|
1. Opt-in. `pnpm seed` never writes it; only `pnpm seed --demo` does.
|
||||||
|
2. Refused in production. The seed will not write demo content when
|
||||||
|
NODE_ENV is production (see index.ts), whatever flags it is given.
|
||||||
|
3. Tagged in the data itself. Every slug starts `demo-`, so every demo
|
||||||
|
URL says so - /en/news-and-updates/demo-... - and `--demo --clean`
|
||||||
|
finds them again by that prefix alone, with nothing remembered between
|
||||||
|
runs. The FAQ type has no slug, so its demo entries are matched by
|
||||||
|
their exact questions instead.
|
||||||
|
|
||||||
|
The names are deliberately generic ("Coastal Justice Forum") rather than
|
||||||
|
plausible-sounding Libyan organisations: an invented name that could be
|
||||||
|
mistaken for a real partner is the thing to avoid. Cities are real places,
|
||||||
|
used only as locations.
|
||||||
|
|
||||||
|
DATES are computed from the moment the seed runs, so a freshly seeded site
|
||||||
|
always has events in the past, in progress and still to come.
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
import type { Localised, SeedData } from './upsert';
|
||||||
|
|
||||||
|
/** Every demo slug starts with this, and that is how `--clean` finds them. */
|
||||||
|
export const DEMO_PREFIX = 'demo-';
|
||||||
|
|
||||||
|
export interface DemoEntry {
|
||||||
|
readonly slug: string;
|
||||||
|
readonly topics?: readonly string[];
|
||||||
|
readonly regions?: readonly string[];
|
||||||
|
readonly partners?: readonly string[];
|
||||||
|
readonly data: Localised<SeedData>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DAY = 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
/** An ISO date `days` from the reference point, date only. */
|
||||||
|
const onDay = (from: Date, days: number): string =>
|
||||||
|
new Date(from.getTime() + days * DAY).toISOString().slice(0, 10);
|
||||||
|
|
||||||
|
/** The same, with a time of day, for the datetime fields. */
|
||||||
|
const atHour = (from: Date, days: number, hour: number): string => {
|
||||||
|
const when = new Date(from.getTime() + days * DAY);
|
||||||
|
when.setUTCHours(hour, 0, 0, 0);
|
||||||
|
return when.toISOString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
REGIONS
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const DEMO_REGIONS: readonly DemoEntry[] = [
|
||||||
|
['tripoli', 'Tripoli', 'طرابلس'],
|
||||||
|
['benghazi', 'Benghazi', 'بنغازي'],
|
||||||
|
['misrata', 'Misrata', 'مصراتة'],
|
||||||
|
['sebha', 'Sebha', 'سبها'],
|
||||||
|
['zawiya', 'Zawiya', 'الزاوية'],
|
||||||
|
].map(([key, en, ar]) => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
data: {
|
||||||
|
en: { name: en as string, slug },
|
||||||
|
ar: { name: ar as string, slug },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export const DEMO_REGION_SLUGS = DEMO_REGIONS.map((region) => region.slug);
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
THE CIVIL SOCIETY NETWORK
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Twelve organisations, which is what the home page's logo wall needs to
|
||||||
|
become a marquee rather than a grid (it wants at least eight). None of them
|
||||||
|
has a logo: an invented organisation with an invented mark would be a step
|
||||||
|
too far, and the tile's no-logo state - its name set as text - is a state
|
||||||
|
the design draws anyway.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
const csoPartner = (
|
||||||
|
key: string,
|
||||||
|
en: { name: string; description: string },
|
||||||
|
ar: { name: string; description: string },
|
||||||
|
role: 'cso-partner' | 'institution' = 'cso-partner'
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
data: {
|
||||||
|
en: { name: en.name, slug, description: en.description, partnerRole: role, country: 'Libya' },
|
||||||
|
ar: { name: ar.name, slug, description: ar.description, partnerRole: role, country: 'ليبيا' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DEMO_PARTNERS: readonly DemoEntry[] = [
|
||||||
|
csoPartner(
|
||||||
|
'coastal-justice-forum',
|
||||||
|
{ name: 'Coastal Justice Forum', description: 'Legal awareness sessions for residents of the coastal municipalities.' },
|
||||||
|
{ name: 'منتدى العدالة الساحلي', description: 'جلسات توعية قانونية لسكان البلديات الساحلية.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'southern-governance-network',
|
||||||
|
{ name: 'Southern Governance Network', description: 'Bringing municipal councils and residents together in the south.' },
|
||||||
|
{ name: 'شبكة الحوكمة الجنوبية', description: 'تقريب المجالس البلدية من السكان في الجنوب.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'open-municipality-initiative',
|
||||||
|
{ name: 'Open Municipality Initiative', description: 'Publishing municipal budgets and service plans in plain language.' },
|
||||||
|
{ name: 'مبادرة البلدية المفتوحة', description: 'نشر ميزانيات البلديات وخطط الخدمات بلغة مبسّطة.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'womens-participation-centre',
|
||||||
|
{ name: 'Women’s Participation Centre', description: 'Supporting women’s participation in local decision-making.' },
|
||||||
|
{ name: 'مركز المشاركة النسائية', description: 'دعم مشاركة النساء في صنع القرار المحلي.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'youth-civic-lab',
|
||||||
|
{ name: 'Youth Civic Lab', description: 'Civic education and volunteering programmes for young people.' },
|
||||||
|
{ name: 'مختبر الشباب المدني', description: 'برامج تربية مدنية وتطوّع للشباب.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'community-mediation-group',
|
||||||
|
{ name: 'Community Mediation Group', description: 'Mediation between neighbourhoods and local service providers.' },
|
||||||
|
{ name: 'مجموعة الوساطة المجتمعية', description: 'الوساطة بين الأحياء ومقدّمي الخدمات المحليين.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'legal-aid-collective',
|
||||||
|
{ name: 'Legal Aid Collective', description: 'Free first-line legal advice and referral.' },
|
||||||
|
{ name: 'تجمّع المساعدة القانونية', description: 'استشارات قانونية أولية مجانية وإحالة.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'transparency-watch-libya',
|
||||||
|
{ name: 'Transparency Watch', description: 'Monitoring public procurement at municipal level.' },
|
||||||
|
{ name: 'مرصد الشفافية', description: 'مراقبة المشتريات العامة على مستوى البلديات.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'desert-communities-association',
|
||||||
|
{ name: 'Desert Communities Association', description: 'Human-security initiatives in remote communities.' },
|
||||||
|
{ name: 'جمعية مجتمعات الصحراء', description: 'مبادرات الأمن البشري في المجتمعات النائية.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'civic-media-workshop',
|
||||||
|
{ name: 'Civic Media Workshop', description: 'Training citizen reporters to cover local governance.' },
|
||||||
|
{ name: 'ورشة الإعلام المدني', description: 'تدريب المراسلين المواطنين على تغطية الحوكمة المحلية.' }
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'municipal-council-of-tripoli-centre',
|
||||||
|
{ name: 'Municipal Council — Tripoli Centre', description: 'Local institution partnering on service-delivery dialogue.' },
|
||||||
|
{ name: 'المجلس البلدي — وسط طرابلس', description: 'مؤسسة محلية شريكة في حوار تقديم الخدمات.' },
|
||||||
|
'institution'
|
||||||
|
),
|
||||||
|
csoPartner(
|
||||||
|
'municipal-council-of-benghazi',
|
||||||
|
{ name: 'Municipal Council — Benghazi', description: 'Local institution partnering on transparency and planning.' },
|
||||||
|
{ name: 'المجلس البلدي — بنغازي', description: 'مؤسسة محلية شريكة في الشفافية والتخطيط.' },
|
||||||
|
'institution'
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
export const DEMO_PARTNER_SLUGS = DEMO_PARTNERS.map((partner) => partner.slug);
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
FAQs
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
No slug on this content type, so `--clean` matches these questions exactly.
|
||||||
|
Change a question here and the old one stops being cleanable - which is the
|
||||||
|
point: an edited question is an editor's question, not the seed's.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
const faq = (order: number, en: [string, string], ar: [string, string]): Localised<SeedData> => ({
|
||||||
|
en: { question: en[0], answer: en[1], order },
|
||||||
|
ar: { question: ar[0], answer: ar[1], order },
|
||||||
|
});
|
||||||
|
|
||||||
|
export const DEMO_FAQS: readonly Localised<SeedData>[] = [
|
||||||
|
faq(
|
||||||
|
1,
|
||||||
|
['Who can apply to a SHARP-ER call?', 'Calls are open to civil society organisations registered in Libya. Each call lists its own eligibility criteria on its page.'],
|
||||||
|
['من يمكنه التقديم على دعوات SHARP-ER؟', 'الدعوات مفتوحة لمنظمات المجتمع المدني المسجّلة في ليبيا. وتُدرج كل دعوة شروط الأهلية الخاصة بها على صفحتها.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
2,
|
||||||
|
['In which languages can I apply?', 'Applications are accepted in Arabic and in English. Neither is preferred over the other.'],
|
||||||
|
['بأي لغة يمكنني التقديم؟', 'تُقبل الطلبات باللغتين العربية والإنجليزية، ولا تُفضَّل إحداهما على الأخرى.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
3,
|
||||||
|
['What is a SUQ dialogue?', 'SUQ stands for Search, Understand, Question. It is a facilitated session that brings residents together with the institutions that serve them.'],
|
||||||
|
['ما هو حوار SUQ؟', '«SUQ» اختصار لـ «ابحث، افهم، اسأل». وهي جلسة ميسَّرة تجمع السكان بالمؤسسات التي تخدمهم.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
4,
|
||||||
|
['Do I need to be a member of the SHARP network to take part?', 'No. Events and calls are open beyond the network, though some opportunities are reserved for member organisations and say so.'],
|
||||||
|
['هل يجب أن أكون عضوًا في شبكة SHARP للمشاركة؟', 'لا. الفعاليات والدعوات مفتوحة خارج الشبكة، وإن كانت بعض الفرص مخصّصة للمنظمات الأعضاء وتوضّح ذلك.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
5,
|
||||||
|
['Is there a cost to attend an event?', 'No. Every SHARP-ER event is free to attend.'],
|
||||||
|
['هل هناك رسوم لحضور الفعاليات؟', 'لا. حضور جميع فعاليات SHARP-ER مجاني.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
6,
|
||||||
|
['How is SHARP-ER funded?', 'SHARP-ER is funded by the European Union and implemented by a consortium of Acted, United Efforts Consultancy and Stichting Bureau Ensemble.'],
|
||||||
|
['كيف يُموَّل مشروع SHARP-ER؟', 'يُموَّل SHARP-ER من الاتحاد الأوروبي، وينفّذه ائتلاف يضم Acted وUnited Efforts Consultancy وStichting Bureau Ensemble.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
7,
|
||||||
|
['Can my organisation publish an update on this site?', 'Partner organisations in the network can submit updates, which appear in the newsroom under "From the Network" with the organisation credited.'],
|
||||||
|
['هل يمكن لمنظمتي نشر مستجدات على هذا الموقع؟', 'يمكن للمنظمات الشريكة في الشبكة إرسال مستجداتها، فتظهر في غرفة الأخبار ضمن «من الشبكة» منسوبة إلى المنظمة.']
|
||||||
|
),
|
||||||
|
faq(
|
||||||
|
8,
|
||||||
|
['Where can I find the project’s publications?', 'Research, policy articles, project reports and fact sheets are all in Resources and Publications, filterable by type, topic and year.'],
|
||||||
|
['أين أجد منشورات المشروع؟', 'تجد الأبحاث والمقالات السياساتية وتقارير المشروع وأوراق الحقائق في قسم الموارد والمنشورات، مع إمكانية التصفية حسب النوع والموضوع والسنة.']
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
NEWSROOM
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const demoNews = (now: Date): readonly DemoEntry[] => {
|
||||||
|
const article = (
|
||||||
|
key: string,
|
||||||
|
days: number,
|
||||||
|
category: 'sharper-news' | 'from-the-network',
|
||||||
|
authorSlug: string | undefined,
|
||||||
|
topics: readonly string[],
|
||||||
|
regions: readonly string[],
|
||||||
|
en: { title: string; excerpt: string; body: string },
|
||||||
|
ar: { title: string; excerpt: string; body: string }
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
const shared = { slug, category, publishDate: onDay(now, days), featured: false };
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
topics,
|
||||||
|
regions,
|
||||||
|
...(authorSlug ? { partners: [authorSlug] } : {}),
|
||||||
|
data: {
|
||||||
|
en: { ...shared, title: en.title, excerpt: en.excerpt, body: en.body },
|
||||||
|
ar: { ...shared, title: ar.title, excerpt: ar.excerpt, body: ar.body },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
article(
|
||||||
|
'first-round-of-sub-projects-selected',
|
||||||
|
-7,
|
||||||
|
'sharper-news',
|
||||||
|
undefined,
|
||||||
|
['civil-society'],
|
||||||
|
[`${DEMO_PREFIX}tripoli`],
|
||||||
|
{
|
||||||
|
title: 'First round of community sub-projects selected',
|
||||||
|
excerpt: 'The selection panel has finished its review of the first Call for Expression of Interest.',
|
||||||
|
body: 'The selection panel has finished its review of the first Call for Expression of Interest. Successful organisations will be contacted directly, and a summary of the themes the round attracted will be published alongside the next call.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'اختيار الجولة الأولى من المشاريع المجتمعية الفرعية',
|
||||||
|
excerpt: 'أنهت لجنة الاختيار مراجعتها لأول دعوة للتعبير عن الاهتمام.',
|
||||||
|
body: 'أنهت لجنة الاختيار مراجعتها لأول دعوة للتعبير عن الاهتمام. وسيتم التواصل مباشرة مع المنظمات المختارة، وسيُنشر ملخّص للمحاور التي استقطبتها الجولة مع الدعوة التالية.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
article(
|
||||||
|
'dialogue-facilitation-training-concludes',
|
||||||
|
-21,
|
||||||
|
'sharper-news',
|
||||||
|
undefined,
|
||||||
|
['dialogue'],
|
||||||
|
[`${DEMO_PREFIX}benghazi`],
|
||||||
|
{
|
||||||
|
title: 'Dialogue facilitation training concludes in Benghazi',
|
||||||
|
excerpt: 'Participants from eleven organisations completed the three-day facilitation course.',
|
||||||
|
body: 'Participants from eleven organisations completed the three-day facilitation course, which covers preparing a session, handling disagreement in the room, and following up on what was agreed.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'اختتام التدريب على تيسير الحوار في بنغازي',
|
||||||
|
excerpt: 'أتمّ مشاركون من إحدى عشرة منظمة دورة التيسير التي استمرت ثلاثة أيام.',
|
||||||
|
body: 'أتمّ مشاركون من إحدى عشرة منظمة دورة التيسير التي استمرت ثلاثة أيام، والتي تتناول الإعداد للجلسة، وإدارة الاختلاف داخل القاعة، ومتابعة ما جرى الاتفاق عليه.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
article(
|
||||||
|
'perception-survey-fieldwork-begins',
|
||||||
|
-35,
|
||||||
|
'sharper-news',
|
||||||
|
undefined,
|
||||||
|
['local-governance'],
|
||||||
|
[],
|
||||||
|
{
|
||||||
|
title: 'Nationwide perception survey enters fieldwork',
|
||||||
|
excerpt: 'Data collection has begun for the project’s first nationwide perception study.',
|
||||||
|
body: 'Data collection has begun for the project’s first nationwide perception study. Findings will be published in Resources and Publications once analysis is complete.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'بدء العمل الميداني للدراسة الاستطلاعية الوطنية',
|
||||||
|
excerpt: 'انطلق جمع البيانات لأول دراسة استطلاعية وطنية ينفّذها المشروع.',
|
||||||
|
body: 'انطلق جمع البيانات لأول دراسة استطلاعية وطنية ينفّذها المشروع. وستُنشر النتائج في قسم الموارد والمنشورات فور اكتمال التحليل.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
article(
|
||||||
|
'coastal-justice-forum-completes-sub-project',
|
||||||
|
-14,
|
||||||
|
'from-the-network',
|
||||||
|
`${DEMO_PREFIX}coastal-justice-forum`,
|
||||||
|
['rule-of-law'],
|
||||||
|
[`${DEMO_PREFIX}zawiya`],
|
||||||
|
{
|
||||||
|
title: 'Coastal Justice Forum completes its first community sub-project',
|
||||||
|
excerpt: 'Six legal awareness sessions reached residents across four neighbourhoods.',
|
||||||
|
body: 'Six legal awareness sessions reached residents across four neighbourhoods, focusing on civil documentation and how to raise a complaint with the municipality.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'منتدى العدالة الساحلي يُنجز أول مشروع مجتمعي فرعي',
|
||||||
|
excerpt: 'ست جلسات توعية قانونية وصلت إلى سكان أربعة أحياء.',
|
||||||
|
body: 'ست جلسات توعية قانونية وصلت إلى سكان أربعة أحياء، وركّزت على الوثائق المدنية وكيفية تقديم شكوى إلى البلدية.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
article(
|
||||||
|
'open-municipality-publishes-budget-guide',
|
||||||
|
-28,
|
||||||
|
'from-the-network',
|
||||||
|
`${DEMO_PREFIX}open-municipality-initiative`,
|
||||||
|
['local-governance'],
|
||||||
|
[`${DEMO_PREFIX}misrata`],
|
||||||
|
{
|
||||||
|
title: 'Open Municipality Initiative publishes a plain-language budget guide',
|
||||||
|
excerpt: 'The guide explains how a municipal budget is drawn up and where residents can comment on it.',
|
||||||
|
body: 'The guide explains how a municipal budget is drawn up, which decisions are taken when, and where residents can comment on it.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'مبادرة البلدية المفتوحة تنشر دليلًا مبسّطًا للميزانية',
|
||||||
|
excerpt: 'يشرح الدليل كيفية إعداد ميزانية البلدية وأين يمكن للسكان إبداء الرأي فيها.',
|
||||||
|
body: 'يشرح الدليل كيفية إعداد ميزانية البلدية، وأي القرارات تُتّخذ ومتى، وأين يمكن للسكان إبداء الرأي فيها.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
article(
|
||||||
|
'youth-civic-lab-opens-volunteer-round',
|
||||||
|
-3,
|
||||||
|
'from-the-network',
|
||||||
|
`${DEMO_PREFIX}youth-civic-lab`,
|
||||||
|
['civil-society'],
|
||||||
|
[`${DEMO_PREFIX}sebha`],
|
||||||
|
{
|
||||||
|
title: 'Youth Civic Lab opens its next volunteering round',
|
||||||
|
excerpt: 'Applications are open to anyone aged 18 to 30 living in the south.',
|
||||||
|
body: 'Applications are open to anyone aged 18 to 30 living in the south. Volunteers are matched with a local organisation for three months.\n\nThis is demo content and describes nothing that has happened.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'مختبر الشباب المدني يفتح جولة التطوّع التالية',
|
||||||
|
excerpt: 'التقديم مفتوح لمن تتراوح أعمارهم بين 18 و30 عامًا من سكان الجنوب.',
|
||||||
|
body: 'التقديم مفتوح لمن تتراوح أعمارهم بين 18 و30 عامًا من سكان الجنوب. ويُربط كل متطوّع بمنظمة محلية لمدة ثلاثة أشهر.\n\nهذا محتوى تجريبي ولا يصف أي حدث وقع فعلًا.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
EVENTS
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Spread across the calendar on purpose: two already over, one running, three
|
||||||
|
still to come, so the listing's filters and every registration state have
|
||||||
|
something to show.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const demoEvents = (now: Date): readonly DemoEntry[] => {
|
||||||
|
const event = (
|
||||||
|
key: string,
|
||||||
|
days: number,
|
||||||
|
options: {
|
||||||
|
eventType: string;
|
||||||
|
format: 'in-person' | 'online' | 'hybrid';
|
||||||
|
registrationStatus: 'open' | 'closed' | 'full' | 'waitlist' | 'not-required';
|
||||||
|
capacity?: number;
|
||||||
|
region?: string;
|
||||||
|
topics?: readonly string[];
|
||||||
|
partners?: readonly string[];
|
||||||
|
},
|
||||||
|
en: { title: string; description: string; venue?: string },
|
||||||
|
ar: { title: string; description: string; venue?: string }
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
const shared = {
|
||||||
|
slug,
|
||||||
|
eventType: options.eventType,
|
||||||
|
format: options.format,
|
||||||
|
registrationStatus: options.registrationStatus,
|
||||||
|
startDateTime: atHour(now, days, 9),
|
||||||
|
endDateTime: atHour(now, days, 14),
|
||||||
|
timezone: 'Africa/Tripoli',
|
||||||
|
...(options.capacity ? { capacity: options.capacity } : {}),
|
||||||
|
...(options.registrationStatus === 'open'
|
||||||
|
? { registrationDeadline: atHour(now, days - 2, 23) }
|
||||||
|
: {}),
|
||||||
|
waitlistEnabled: options.registrationStatus === 'waitlist',
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
...(options.topics ? { topics: options.topics } : {}),
|
||||||
|
...(options.region ? { regions: [options.region] } : {}),
|
||||||
|
...(options.partners ? { partners: options.partners } : {}),
|
||||||
|
data: {
|
||||||
|
en: { ...shared, title: en.title, description: en.description, ...(en.venue ? { venue: en.venue } : {}) },
|
||||||
|
ar: { ...shared, title: ar.title, description: ar.description, ...(ar.venue ? { venue: ar.venue } : {}) },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
event(
|
||||||
|
'suq-dialogue-tripoli',
|
||||||
|
21,
|
||||||
|
{
|
||||||
|
eventType: 'suq-dialogue',
|
||||||
|
format: 'in-person',
|
||||||
|
registrationStatus: 'open',
|
||||||
|
capacity: 60,
|
||||||
|
region: `${DEMO_PREFIX}tripoli`,
|
||||||
|
topics: ['dialogue', 'local-governance'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SUQ Dialogue — water and sanitation services',
|
||||||
|
description: 'Residents and the municipal services department sit down together over the winter service plan.',
|
||||||
|
venue: 'Tripoli',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'حوار SUQ — خدمات المياه والصرف الصحي',
|
||||||
|
description: 'يجلس السكان وإدارة الخدمات البلدية معًا لمناقشة خطة الخدمات الشتوية.',
|
||||||
|
venue: 'طرابلس',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
event(
|
||||||
|
'facilitation-training-online',
|
||||||
|
35,
|
||||||
|
{
|
||||||
|
eventType: 'training',
|
||||||
|
format: 'online',
|
||||||
|
registrationStatus: 'open',
|
||||||
|
capacity: 25,
|
||||||
|
topics: ['dialogue'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dialogue facilitation training',
|
||||||
|
description: 'A three-session online course on preparing, running and following up a community dialogue.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'تدريب على تيسير الحوار',
|
||||||
|
description: 'دورة عبر الإنترنت من ثلاث جلسات حول الإعداد للحوار المجتمعي وإدارته ومتابعته.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
event(
|
||||||
|
'network-meeting-south',
|
||||||
|
49,
|
||||||
|
{
|
||||||
|
eventType: 'network-meeting',
|
||||||
|
format: 'hybrid',
|
||||||
|
registrationStatus: 'waitlist',
|
||||||
|
capacity: 40,
|
||||||
|
region: `${DEMO_PREFIX}sebha`,
|
||||||
|
topics: ['civil-society'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SHARP Network regional meeting — South',
|
||||||
|
description: 'Member organisations in the south meet to plan the next six months of joint work.',
|
||||||
|
venue: 'Sebha',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'اجتماع شبكة SHARP الإقليمي — الجنوب',
|
||||||
|
description: 'تجتمع المنظمات الأعضاء في الجنوب للتخطيط للأشهر الستة المقبلة من العمل المشترك.',
|
||||||
|
venue: 'سبها',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
event(
|
||||||
|
'law-session-with-the-ccs',
|
||||||
|
-5,
|
||||||
|
{
|
||||||
|
eventType: 'law-session',
|
||||||
|
format: 'in-person',
|
||||||
|
registrationStatus: 'closed',
|
||||||
|
region: `${DEMO_PREFIX}benghazi`,
|
||||||
|
topics: ['rule-of-law', 'civil-society'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Civil Society Law Session with the CCS',
|
||||||
|
description: 'A joint session on registration procedures and reporting obligations for civil society organisations.',
|
||||||
|
venue: 'Benghazi',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'جلسة قانون المجتمع المدني مع لجنة المجتمع المدني',
|
||||||
|
description: 'جلسة مشتركة حول إجراءات التسجيل والتزامات التقارير لمنظمات المجتمع المدني.',
|
||||||
|
venue: 'بنغازي',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
event(
|
||||||
|
'suq-dialogue-misrata',
|
||||||
|
-30,
|
||||||
|
{
|
||||||
|
eventType: 'suq-dialogue',
|
||||||
|
format: 'in-person',
|
||||||
|
registrationStatus: 'closed',
|
||||||
|
region: `${DEMO_PREFIX}misrata`,
|
||||||
|
topics: ['dialogue'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SUQ Dialogue — street lighting and public safety',
|
||||||
|
description: 'A dialogue between neighbourhood representatives and the municipality on night-time safety.',
|
||||||
|
venue: 'Misrata',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'حوار SUQ — الإنارة العامة والسلامة',
|
||||||
|
description: 'حوار بين ممثلي الأحياء والبلدية حول السلامة الليلية.',
|
||||||
|
venue: 'مصراتة',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
event(
|
||||||
|
'project-open-day',
|
||||||
|
7,
|
||||||
|
{
|
||||||
|
eventType: 'other',
|
||||||
|
format: 'online',
|
||||||
|
registrationStatus: 'not-required',
|
||||||
|
topics: ['civil-society'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SHARP-ER open session — how to apply',
|
||||||
|
description: 'An open walk-through of the application form and the selection criteria. No registration needed.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'جلسة SHARP-ER المفتوحة — كيف تتقدّم بطلب',
|
||||||
|
description: 'شرح مفتوح لنموذج التقديم ومعايير الاختيار. لا يلزم التسجيل.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
OPPORTUNITIES
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const demoOpportunities = (now: Date): readonly DemoEntry[] => {
|
||||||
|
const opportunity = (
|
||||||
|
key: string,
|
||||||
|
options: {
|
||||||
|
opportunityType: string;
|
||||||
|
opportunityStatus: 'upcoming' | 'open' | 'closed';
|
||||||
|
openDays: number;
|
||||||
|
deadlineDays: number;
|
||||||
|
topics?: readonly string[];
|
||||||
|
partners?: readonly string[];
|
||||||
|
},
|
||||||
|
en: { title: string; summary: string; eligibility: string; howToApply: string },
|
||||||
|
ar: { title: string; summary: string; eligibility: string; howToApply: string }
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
const shared = {
|
||||||
|
slug,
|
||||||
|
opportunityType: options.opportunityType,
|
||||||
|
opportunityStatus: options.opportunityStatus,
|
||||||
|
openDate: onDay(now, options.openDays),
|
||||||
|
deadline: atHour(now, options.deadlineDays, 23),
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
...(options.topics ? { topics: options.topics } : {}),
|
||||||
|
...(options.partners ? { partners: options.partners } : {}),
|
||||||
|
data: {
|
||||||
|
en: { ...shared, ...en },
|
||||||
|
ar: { ...shared, ...ar },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
opportunity(
|
||||||
|
'call-for-expression-of-interest-round-two',
|
||||||
|
{
|
||||||
|
opportunityType: 'call-eoi',
|
||||||
|
opportunityStatus: 'open',
|
||||||
|
openDays: -10,
|
||||||
|
deadlineDays: 25,
|
||||||
|
topics: ['civil-society', 'rule-of-law'],
|
||||||
|
partners: ['acted'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Call for Expression of Interest — community sub-projects, round two',
|
||||||
|
summary: 'Funding for civil society organisations to design and run a community sub-project over nine months.',
|
||||||
|
eligibility: 'Open to civil society organisations registered in Libya with at least one year of operations. Consortia of two or more organisations are welcome.',
|
||||||
|
howToApply: 'Complete the application form on this page. Applications may be submitted in Arabic or English. Late submissions are not considered.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'دعوة للتعبير عن الاهتمام — المشاريع المجتمعية الفرعية، الجولة الثانية',
|
||||||
|
summary: 'تمويل لمنظمات المجتمع المدني لتصميم وتنفيذ مشروع مجتمعي فرعي على مدى تسعة أشهر.',
|
||||||
|
eligibility: 'الدعوة مفتوحة لمنظمات المجتمع المدني المسجّلة في ليبيا ولديها سنة عمل واحدة على الأقل. ويُرحَّب بالتحالفات بين منظمتين أو أكثر.',
|
||||||
|
howToApply: 'يُرجى تعبئة نموذج التقديم في هذه الصفحة. ويمكن التقديم بالعربية أو الإنجليزية. ولا يُنظر في الطلبات المتأخرة.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
opportunity(
|
||||||
|
'join-the-sharp-network',
|
||||||
|
{
|
||||||
|
opportunityType: 'network-membership',
|
||||||
|
opportunityStatus: 'open',
|
||||||
|
openDays: -60,
|
||||||
|
deadlineDays: 90,
|
||||||
|
topics: ['civil-society'],
|
||||||
|
partners: ['united-efforts-consultancy'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Join the SHARP network',
|
||||||
|
summary: 'Become part of the civil society network behind SHARP-ER: regional meetings, peer learning, and joint events.',
|
||||||
|
eligibility: 'Open to civil society organisations working anywhere in Libya. There is no fee and no minimum size.',
|
||||||
|
howToApply: 'Send the membership form together with your registration certificate. Applications are reviewed on a rolling basis.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'انضم إلى شبكة SHARP',
|
||||||
|
summary: 'كن جزءًا من شبكة المجتمع المدني وراء SHARP-ER: اجتماعات إقليمية، وتعلّم بين الأقران، وفعاليات مشتركة.',
|
||||||
|
eligibility: 'مفتوح لمنظمات المجتمع المدني العاملة في أي مكان في ليبيا. لا توجد رسوم ولا حد أدنى للحجم.',
|
||||||
|
howToApply: 'أرسل نموذج العضوية مرفقًا بشهادة التسجيل. وتُراجَع الطلبات أولًا بأول.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
opportunity(
|
||||||
|
'training-monitoring-and-reporting',
|
||||||
|
{
|
||||||
|
opportunityType: 'training',
|
||||||
|
opportunityStatus: 'upcoming',
|
||||||
|
openDays: 20,
|
||||||
|
deadlineDays: 45,
|
||||||
|
topics: ['local-governance'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Training — monitoring and reporting for small grants',
|
||||||
|
summary: 'A short course for organisations managing a grant for the first time.',
|
||||||
|
eligibility: 'Reserved for organisations that hold, or have applied for, a SHARP-ER sub-project grant.',
|
||||||
|
howToApply: 'Applications open on the date shown above. Places are limited and allocated in order of application.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'تدريب — المتابعة وإعداد التقارير للمنح الصغيرة',
|
||||||
|
summary: 'دورة قصيرة للمنظمات التي تدير منحة للمرة الأولى.',
|
||||||
|
eligibility: 'مخصّص للمنظمات الحاصلة على منحة مشروع فرعي من SHARP-ER أو المتقدّمة للحصول عليها.',
|
||||||
|
howToApply: 'يُفتح التقديم في التاريخ الموضّح أعلاه. المقاعد محدودة وتُخصَّص حسب أسبقية التقديم.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
opportunity(
|
||||||
|
'policy-to-rights-first-call',
|
||||||
|
{
|
||||||
|
opportunityType: 'grant',
|
||||||
|
opportunityStatus: 'closed',
|
||||||
|
openDays: -120,
|
||||||
|
deadlineDays: -40,
|
||||||
|
topics: ['rule-of-law'],
|
||||||
|
partners: ['acted'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Policy-to-Rights (P2R) — first call',
|
||||||
|
summary: 'Support for organisations turning a policy commitment into a concrete change residents can see.',
|
||||||
|
eligibility: 'This call is closed. It was open to organisations with previous experience of policy advocacy.',
|
||||||
|
howToApply: 'This call is closed. The next round will be announced on this page.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '«من السياسة إلى الحقوق» (P2R) — الدعوة الأولى',
|
||||||
|
summary: 'دعم للمنظمات التي تحوّل التزامًا سياساتيًا إلى تغيير ملموس يلمسه السكان.',
|
||||||
|
eligibility: 'هذه الدعوة مغلقة. وكانت مفتوحة للمنظمات ذات الخبرة السابقة في المناصرة السياساتية.',
|
||||||
|
howToApply: 'هذه الدعوة مغلقة. وسيُعلن عن الجولة التالية في هذه الصفحة.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
RESOURCES
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
No files are attached: the seed uploads nothing, so each entry is a record
|
||||||
|
with its metadata and the listing draws its format chip from that. The
|
||||||
|
detail page shows the entry without a download, which is the state an
|
||||||
|
editor sees before they attach the PDF.
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const demoResources = (now: Date): readonly DemoEntry[] => {
|
||||||
|
const resource = (
|
||||||
|
key: string,
|
||||||
|
options: {
|
||||||
|
resourceType: string;
|
||||||
|
resourceLanguage: 'en' | 'ar' | 'bilingual';
|
||||||
|
days: number;
|
||||||
|
pageCount?: number;
|
||||||
|
topics?: readonly string[];
|
||||||
|
partners?: readonly string[];
|
||||||
|
featured?: boolean;
|
||||||
|
authors?: string;
|
||||||
|
},
|
||||||
|
en: { title: string; description: string },
|
||||||
|
ar: { title: string; description: string }
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
const shared = {
|
||||||
|
slug,
|
||||||
|
resourceType: options.resourceType,
|
||||||
|
resourceLanguage: options.resourceLanguage,
|
||||||
|
publicationDate: onDay(now, options.days),
|
||||||
|
featured: options.featured ?? false,
|
||||||
|
...(options.pageCount ? { pageCount: options.pageCount } : {}),
|
||||||
|
...(options.authors ? { authors: options.authors } : {}),
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
...(options.topics ? { topics: options.topics } : {}),
|
||||||
|
...(options.partners ? { partners: options.partners } : {}),
|
||||||
|
data: {
|
||||||
|
en: { ...shared, ...en },
|
||||||
|
ar: { ...shared, ...ar },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
resource(
|
||||||
|
'nationwide-perception-study',
|
||||||
|
{
|
||||||
|
resourceType: 'research-perception',
|
||||||
|
resourceLanguage: 'bilingual',
|
||||||
|
days: -45,
|
||||||
|
pageCount: 64,
|
||||||
|
featured: true,
|
||||||
|
authors: 'Stichting Bureau Ensemble',
|
||||||
|
topics: ['local-governance', 'rule-of-law'],
|
||||||
|
partners: ['stichting-bureau-ensemble'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Nationwide perception study — baseline',
|
||||||
|
description: 'How residents across Libya describe their access to justice and their local services.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'الدراسة الاستطلاعية الوطنية — خط الأساس',
|
||||||
|
description: 'كيف يصف السكان في مختلف أنحاء ليبيا وصولهم إلى العدالة وخدماتهم المحلية.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
resource(
|
||||||
|
'sharp-er-fact-sheet',
|
||||||
|
{
|
||||||
|
resourceType: 'visibility-factsheet',
|
||||||
|
resourceLanguage: 'bilingual',
|
||||||
|
days: -90,
|
||||||
|
pageCount: 2,
|
||||||
|
topics: ['civil-society'],
|
||||||
|
},
|
||||||
|
{ title: 'SHARP-ER fact sheet', description: 'A two-page summary of the project, its partners and its areas of work.' },
|
||||||
|
{ title: 'ورقة حقائق SHARP-ER', description: 'ملخّص من صفحتين عن المشروع وشركائه ومجالات عمله.' }
|
||||||
|
),
|
||||||
|
resource(
|
||||||
|
'policy-article-municipal-transparency',
|
||||||
|
{
|
||||||
|
resourceType: 'policy-article',
|
||||||
|
resourceLanguage: 'en',
|
||||||
|
days: -20,
|
||||||
|
pageCount: 12,
|
||||||
|
authors: 'Transparency Watch',
|
||||||
|
topics: ['local-governance'],
|
||||||
|
partners: [`${DEMO_PREFIX}transparency-watch-libya`],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'What municipal transparency costs, and what it saves',
|
||||||
|
description: 'A Policy-to-Rights article on publishing procurement decisions at municipal level.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'ما تكلفة الشفافية البلدية وما الذي توفّره',
|
||||||
|
description: 'مقال ضمن سلسلة «من السياسة إلى الحقوق» حول نشر قرارات المشتريات على مستوى البلديات.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
resource(
|
||||||
|
'policy-article-legal-aid-access',
|
||||||
|
{
|
||||||
|
resourceType: 'policy-article',
|
||||||
|
resourceLanguage: 'ar',
|
||||||
|
days: -55,
|
||||||
|
pageCount: 9,
|
||||||
|
authors: 'Legal Aid Collective',
|
||||||
|
topics: ['rule-of-law'],
|
||||||
|
partners: [`${DEMO_PREFIX}legal-aid-collective`],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'First-line legal advice: who asks, and for what',
|
||||||
|
description: 'What a year of free legal advice sessions says about the questions residents bring.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'الاستشارة القانونية الأولية: من يسأل، وعن ماذا',
|
||||||
|
description: 'ما الذي تكشفه سنة من جلسات الاستشارة القانونية المجانية عن أسئلة السكان.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
resource(
|
||||||
|
'project-report-first-half',
|
||||||
|
{
|
||||||
|
resourceType: 'project-report',
|
||||||
|
resourceLanguage: 'en',
|
||||||
|
days: -10,
|
||||||
|
pageCount: 28,
|
||||||
|
topics: ['civil-society'],
|
||||||
|
partners: ['acted'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Project report — first reporting period',
|
||||||
|
description: 'Activities, participation and lessons from the project’s first reporting period.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'تقرير المشروع — فترة التقرير الأولى',
|
||||||
|
description: 'الأنشطة والمشاركة والدروس المستفادة من فترة التقرير الأولى للمشروع.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
resource(
|
||||||
|
'dialogue-practice-note',
|
||||||
|
{
|
||||||
|
resourceType: 'project-report',
|
||||||
|
resourceLanguage: 'bilingual',
|
||||||
|
days: -70,
|
||||||
|
pageCount: 16,
|
||||||
|
topics: ['dialogue'],
|
||||||
|
partners: ['united-efforts-consultancy'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Practice note — running a SUQ dialogue',
|
||||||
|
description: 'What has worked, and what has not, across the first rounds of community dialogue.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'مذكّرة عملية — كيف يُدار حوار SUQ',
|
||||||
|
description: 'ما الذي نجح وما الذي لم ينجح عبر الجولات الأولى من الحوار المجتمعي.',
|
||||||
|
}
|
||||||
|
),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
KNOWLEDGE HUB
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export const demoKnowledge = (now: Date): readonly DemoEntry[] => {
|
||||||
|
const item = (
|
||||||
|
key: string,
|
||||||
|
itemType: string,
|
||||||
|
days: number,
|
||||||
|
topics: readonly string[],
|
||||||
|
en: { title: string; summary: string },
|
||||||
|
ar: { title: string; summary: string }
|
||||||
|
): DemoEntry => {
|
||||||
|
const slug = `${DEMO_PREFIX}${key}`;
|
||||||
|
const shared = { slug, itemType, publicationDate: onDay(now, days) };
|
||||||
|
return {
|
||||||
|
slug,
|
||||||
|
topics,
|
||||||
|
data: {
|
||||||
|
en: { ...shared, ...en },
|
||||||
|
ar: { ...shared, ...ar },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return [
|
||||||
|
item(
|
||||||
|
'module-governance-basics',
|
||||||
|
'training-module',
|
||||||
|
-80,
|
||||||
|
['local-governance'],
|
||||||
|
{ title: 'Training module — governance basics', summary: 'What a municipality does, who decides what, and where a resident fits in.' },
|
||||||
|
{ title: 'وحدة تدريبية — أساسيات الحوكمة', summary: 'ماذا تفعل البلدية، ومن يقرّر ماذا، وأين يقع دور الساكن.' }
|
||||||
|
),
|
||||||
|
item(
|
||||||
|
'module-facilitation-skills',
|
||||||
|
'training-module',
|
||||||
|
-60,
|
||||||
|
['dialogue'],
|
||||||
|
{ title: 'Training module — facilitation skills', summary: 'Preparing a session, keeping a room together, and closing on something concrete.' },
|
||||||
|
{ title: 'وحدة تدريبية — مهارات التيسير', summary: 'الإعداد للجلسة، وإبقاء القاعة متماسكة، والختام بنتيجة ملموسة.' }
|
||||||
|
),
|
||||||
|
item(
|
||||||
|
'toolkit-community-needs',
|
||||||
|
'toolkit',
|
||||||
|
-40,
|
||||||
|
['civil-society'],
|
||||||
|
{ title: 'Toolkit — identifying community needs', summary: 'A short set of tools for finding out what a neighbourhood actually wants changed.' },
|
||||||
|
{ title: 'دليل عملي — تحديد احتياجات المجتمع', summary: 'مجموعة أدوات موجزة لمعرفة ما يريد الحي تغييره فعلًا.' }
|
||||||
|
),
|
||||||
|
item(
|
||||||
|
'guide-law-session-registration',
|
||||||
|
'law-session-guide',
|
||||||
|
-30,
|
||||||
|
['rule-of-law'],
|
||||||
|
{ title: 'Law Session guide — registration and reporting', summary: 'Plain-language notes from the joint session with the Commission on Civil Society.' },
|
||||||
|
{ title: 'دليل جلسة قانونية — التسجيل وإعداد التقارير', summary: 'ملاحظات بلغة مبسّطة من الجلسة المشتركة مع لجنة المجتمع المدني.' }
|
||||||
|
),
|
||||||
|
item(
|
||||||
|
'case-study-water-dialogue',
|
||||||
|
'case-study',
|
||||||
|
-15,
|
||||||
|
['dialogue', 'local-governance'],
|
||||||
|
{ title: 'Case study — a dialogue that changed a service plan', summary: 'How one SUQ dialogue ended with a revised winter maintenance schedule.' },
|
||||||
|
{ title: 'دراسة حالة — حوار غيّر خطة خدمات', summary: 'كيف انتهى أحد حوارات SUQ بجدول صيانة شتوي معدَّل.' }
|
||||||
|
),
|
||||||
|
item(
|
||||||
|
'case-study-first-grant',
|
||||||
|
'case-study',
|
||||||
|
-5,
|
||||||
|
['civil-society'],
|
||||||
|
{ title: 'Case study — managing a first grant', summary: 'What a small organisation learned in its first nine months of grant management.' },
|
||||||
|
{ title: 'دراسة حالة — إدارة أول منحة', summary: 'ما تعلّمته منظمة صغيرة في أول تسعة أشهر من إدارة منحة.' }
|
||||||
|
),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The home page fields the demo set overrides.
|
||||||
|
*
|
||||||
|
* The status pill is the one piece of approved-looking copy the demo writes,
|
||||||
|
* and it is true of the demo data: `demo-call-for-expression-of-interest-
|
||||||
|
* round-two` really is open on a demo-seeded site.
|
||||||
|
*/
|
||||||
|
export const DEMO_HOME_PAGE: Localised<SeedData> = {
|
||||||
|
en: { hero: { eyebrow: 'Now open · Funding calls for Libyan organisations' } },
|
||||||
|
ar: { hero: { eyebrow: 'مفتوح الآن · دعوات تمويل للمنظمات الليبية' } },
|
||||||
|
};
|
||||||
@@ -0,0 +1,441 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SEED - orchestration
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Run it with `pnpm seed` from the repository root, or from apps/cms:
|
||||||
|
|
||||||
|
pnpm seed the approved content only (approved.ts)
|
||||||
|
pnpm seed --demo the same, plus the invented fixtures (demo.ts)
|
||||||
|
pnpm seed --demo --clean remove the invented fixtures, leave the rest
|
||||||
|
|
||||||
|
IDEMPOTENT. Every write goes through `upsert`, matched on a slug (or, for
|
||||||
|
the single types, on there being only one document), so a second run writes
|
||||||
|
the same fields over the same documents. It never deletes anything except on
|
||||||
|
`--demo --clean`, and then only what carries the demo slug prefix.
|
||||||
|
|
||||||
|
ORDER MATTERS. Partners and topics are written first because the activities,
|
||||||
|
the articles and the About page's consortium cards all point at them by
|
||||||
|
documentId, and a relation can only be set once its target exists.
|
||||||
|
|
||||||
|
WHAT IT DOES NOT TOUCH
|
||||||
|
* Media. The seed uploads nothing. Where a page already has a picture -
|
||||||
|
the home hero, most of all - the existing file is read back and written
|
||||||
|
out again with the new copy, because a component is replaced wholesale
|
||||||
|
on write and anything left out of the payload is gone.
|
||||||
|
* Submissions. `application`, `event-registration` and `contact-submission`
|
||||||
|
hold personal data. Nothing writes to them here, not even in demo mode.
|
||||||
|
* Locales and permissions. Those are reconciled at boot by src/bootstrap.
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
import type { Core } from '@strapi/strapi';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ABOUT_PAGE,
|
||||||
|
ACTIVITIES,
|
||||||
|
CONSORTIUM,
|
||||||
|
CONSORTIUM_ROLES,
|
||||||
|
CONTACT_PAGE,
|
||||||
|
HOME_PAGE,
|
||||||
|
LAUNCH_ARTICLE,
|
||||||
|
SITE_SETTINGS,
|
||||||
|
TOPICS,
|
||||||
|
WHAT_WE_DO_PAGE,
|
||||||
|
type SeedEntries,
|
||||||
|
} from './approved';
|
||||||
|
import {
|
||||||
|
DEMO_FAQS,
|
||||||
|
DEMO_HOME_PAGE,
|
||||||
|
DEMO_PARTNERS,
|
||||||
|
DEMO_PARTNER_SLUGS,
|
||||||
|
DEMO_PREFIX,
|
||||||
|
DEMO_REGIONS,
|
||||||
|
demoEvents,
|
||||||
|
demoKnowledge,
|
||||||
|
demoNews,
|
||||||
|
demoOpportunities,
|
||||||
|
demoResources,
|
||||||
|
type DemoEntry,
|
||||||
|
} from './demo';
|
||||||
|
import {
|
||||||
|
deleteBySlugPrefix,
|
||||||
|
deleteWhere,
|
||||||
|
mediaId,
|
||||||
|
readExisting,
|
||||||
|
upsert,
|
||||||
|
type Localised,
|
||||||
|
type SeedData,
|
||||||
|
type SeedUid,
|
||||||
|
} from './upsert';
|
||||||
|
|
||||||
|
export interface SeedOptions {
|
||||||
|
/** Write the invented fixtures as well as the approved content. */
|
||||||
|
readonly demo: boolean;
|
||||||
|
/** With `demo`, remove those fixtures instead of writing them. */
|
||||||
|
readonly clean: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UID = {
|
||||||
|
siteSettings: 'api::site-settings.site-settings',
|
||||||
|
homePage: 'api::home-page.home-page',
|
||||||
|
aboutPage: 'api::about-page.about-page',
|
||||||
|
whatWeDoPage: 'api::what-we-do-page.what-we-do-page',
|
||||||
|
contactPage: 'api::contact-page.contact-page',
|
||||||
|
partner: 'api::partner.partner',
|
||||||
|
topic: 'api::topic.topic',
|
||||||
|
region: 'api::region.region',
|
||||||
|
activity: 'api::activity.activity',
|
||||||
|
news: 'api::news-article.news-article',
|
||||||
|
event: 'api::event.event',
|
||||||
|
opportunity: 'api::opportunity.opportunity',
|
||||||
|
resource: 'api::resource.resource',
|
||||||
|
knowledge: 'api::knowledge-item.knowledge-item',
|
||||||
|
faq: 'api::faq.faq',
|
||||||
|
} as const satisfies Record<string, SeedUid>;
|
||||||
|
|
||||||
|
/** Every slugged type the demo set writes to, in the order `--clean` sweeps. */
|
||||||
|
const DEMO_SLUGGED_TYPES: readonly SeedUid[] = [
|
||||||
|
UID.knowledge,
|
||||||
|
UID.resource,
|
||||||
|
UID.opportunity,
|
||||||
|
UID.event,
|
||||||
|
UID.news,
|
||||||
|
UID.partner,
|
||||||
|
UID.region,
|
||||||
|
];
|
||||||
|
|
||||||
|
/** slug -> documentId, built as each type is written. */
|
||||||
|
type SlugIndex = Map<string, string>;
|
||||||
|
|
||||||
|
const log = (strapi: Core.Strapi, message: string): void => {
|
||||||
|
strapi.log.info(`[seed] ${message}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Write a list of slugged entries and return the slug -> documentId index. */
|
||||||
|
async function upsertAll(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
entries: ReadonlyArray<{ slug: string; data: Localised<SeedData> }>,
|
||||||
|
into: SlugIndex = new Map()
|
||||||
|
): Promise<SlugIndex> {
|
||||||
|
for (const entry of entries) {
|
||||||
|
const { documentId } = await upsert(strapi, uid, entry.data, {
|
||||||
|
slug: { $eq: entry.slug },
|
||||||
|
});
|
||||||
|
into.set(entry.slug, documentId);
|
||||||
|
}
|
||||||
|
return into;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Turn a list of slugs into the documentIds a relation field wants. */
|
||||||
|
const relate = (index: SlugIndex, slugs: readonly string[] | undefined): string[] =>
|
||||||
|
(slugs ?? []).map((slug) => index.get(slug)).filter((id): id is string => Boolean(id));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add relation fields to both locales of an entry.
|
||||||
|
*
|
||||||
|
* Relations are held per locale in Strapi, so a translation that is written
|
||||||
|
* without them comes back with an empty list - which is how a page ends up
|
||||||
|
* with its topics in English and none in Arabic.
|
||||||
|
*/
|
||||||
|
function withRelations(
|
||||||
|
data: Localised<SeedData>,
|
||||||
|
relations: SeedData
|
||||||
|
): Localised<SeedData> {
|
||||||
|
return {
|
||||||
|
en: { ...data.en, ...relations },
|
||||||
|
ar: { ...data.ar, ...relations },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
THE APPROVED SET
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
async function seedApproved(strapi: Core.Strapi): Promise<{
|
||||||
|
partners: SlugIndex;
|
||||||
|
topics: SlugIndex;
|
||||||
|
launchArticleId: string;
|
||||||
|
}> {
|
||||||
|
await upsert(strapi, UID.siteSettings, SITE_SETTINGS);
|
||||||
|
log(strapi, 'site settings');
|
||||||
|
|
||||||
|
const partners = await upsertAll(strapi, UID.partner, CONSORTIUM);
|
||||||
|
log(strapi, `${partners.size} consortium partners`);
|
||||||
|
|
||||||
|
const topics = await upsertAll(strapi, UID.topic, TOPICS as SeedEntries);
|
||||||
|
log(strapi, `${topics.size} topics`);
|
||||||
|
|
||||||
|
for (const activity of ACTIVITIES) {
|
||||||
|
await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.activity,
|
||||||
|
withRelations(activity.data, {
|
||||||
|
implementingPartners: relate(partners, activity.partners),
|
||||||
|
topics: relate(topics, activity.topics),
|
||||||
|
}),
|
||||||
|
{ slug: { $eq: activity.slug } }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
log(strapi, `${ACTIVITIES.length} activities`);
|
||||||
|
|
||||||
|
const launch = await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.news,
|
||||||
|
withRelations(LAUNCH_ARTICLE.data, { topics: relate(topics, LAUNCH_ARTICLE.topics) }),
|
||||||
|
{ slug: { $eq: LAUNCH_ARTICLE.slug } }
|
||||||
|
);
|
||||||
|
log(strapi, 'the launch article');
|
||||||
|
|
||||||
|
/* The home hero already carries an uploaded picture on this database; read
|
||||||
|
it back so writing the new copy does not drop it. */
|
||||||
|
const existingHome = await readExisting(strapi, UID.homePage, ['hero.media']);
|
||||||
|
const heroMedia = mediaId(existingHome?.hero, 'media');
|
||||||
|
|
||||||
|
await upsert(strapi, UID.homePage, {
|
||||||
|
en: {
|
||||||
|
...HOME_PAGE.en,
|
||||||
|
hero: { ...(HOME_PAGE.en.hero as SeedData), ...(heroMedia ? { media: heroMedia } : {}) },
|
||||||
|
featuredNews: [launch.documentId],
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
...HOME_PAGE.ar,
|
||||||
|
hero: { ...(HOME_PAGE.ar.hero as SeedData), ...(heroMedia ? { media: heroMedia } : {}) },
|
||||||
|
featuredNews: [launch.documentId],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
log(strapi, 'home page');
|
||||||
|
|
||||||
|
/* The About page's consortium cards are components that point at the partner
|
||||||
|
documents, so they can only be built now that the partners exist. */
|
||||||
|
const consortiumFor = (locale: 'en' | 'ar'): SeedData[] =>
|
||||||
|
CONSORTIUM.map((member) => ({
|
||||||
|
partner: partners.get(member.slug),
|
||||||
|
...CONSORTIUM_ROLES[member.slug]![locale],
|
||||||
|
}));
|
||||||
|
|
||||||
|
await upsert(strapi, UID.aboutPage, {
|
||||||
|
en: { ...ABOUT_PAGE.en, consortium: consortiumFor('en') },
|
||||||
|
ar: { ...ABOUT_PAGE.ar, consortium: consortiumFor('ar') },
|
||||||
|
});
|
||||||
|
log(strapi, 'about page');
|
||||||
|
|
||||||
|
await upsert(strapi, UID.whatWeDoPage, WHAT_WE_DO_PAGE);
|
||||||
|
log(strapi, 'what we do page');
|
||||||
|
|
||||||
|
await upsert(strapi, UID.contactPage, CONTACT_PAGE);
|
||||||
|
log(strapi, 'contact page');
|
||||||
|
|
||||||
|
return { partners, topics, launchArticleId: launch.documentId };
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
THE DEMO SET
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
async function seedDemo(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
context: { partners: SlugIndex; topics: SlugIndex; launchArticleId: string }
|
||||||
|
): Promise<void> {
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
const regions = await upsertAll(strapi, UID.region, DEMO_REGIONS);
|
||||||
|
log(strapi, `${regions.size} demo regions`);
|
||||||
|
|
||||||
|
/* Written into the same index as the consortium: a resource or an article
|
||||||
|
can credit either a consortium member or a network organisation, and the
|
||||||
|
lookup should not have to know which. */
|
||||||
|
const partners = await upsertAll(strapi, UID.partner, DEMO_PARTNERS, context.partners);
|
||||||
|
log(strapi, `${DEMO_PARTNERS.length} demo network partners`);
|
||||||
|
|
||||||
|
for (const item of DEMO_FAQS) {
|
||||||
|
await upsert(strapi, UID.faq, item, { question: { $eq: item.en.question } });
|
||||||
|
}
|
||||||
|
log(strapi, `${DEMO_FAQS.length} demo FAQs`);
|
||||||
|
|
||||||
|
/* `entry.partners` is the author on a news article (a single relation) and
|
||||||
|
the implementing/publishing organisations everywhere else. */
|
||||||
|
const news = demoNews(now);
|
||||||
|
const newsIndex: SlugIndex = new Map();
|
||||||
|
for (const entry of news) {
|
||||||
|
const author = relate(partners, entry.partners)[0];
|
||||||
|
const { documentId } = await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.news,
|
||||||
|
withRelations(entry.data, {
|
||||||
|
topics: relate(context.topics, entry.topics),
|
||||||
|
regions: relate(regions, entry.regions),
|
||||||
|
...(author ? { authorOrganisation: author } : {}),
|
||||||
|
}),
|
||||||
|
{ slug: { $eq: entry.slug } }
|
||||||
|
);
|
||||||
|
newsIndex.set(entry.slug, documentId);
|
||||||
|
}
|
||||||
|
log(strapi, `${news.length} demo articles`);
|
||||||
|
|
||||||
|
const events = demoEvents(now);
|
||||||
|
for (const entry of events) {
|
||||||
|
await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.event,
|
||||||
|
withRelations(entry.data, {
|
||||||
|
topics: relate(context.topics, entry.topics),
|
||||||
|
/* `region` is a single relation on this type, not a list. */
|
||||||
|
...(entry.regions?.length ? { region: relate(regions, entry.regions)[0] } : {}),
|
||||||
|
implementingPartners: relate(partners, entry.partners),
|
||||||
|
}),
|
||||||
|
{ slug: { $eq: entry.slug } }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
log(strapi, `${events.length} demo events`);
|
||||||
|
|
||||||
|
const opportunities = demoOpportunities(now);
|
||||||
|
for (const entry of opportunities) {
|
||||||
|
await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.opportunity,
|
||||||
|
withRelations(entry.data, {
|
||||||
|
topics: relate(context.topics, entry.topics),
|
||||||
|
implementingPartners: relate(partners, entry.partners),
|
||||||
|
}),
|
||||||
|
{ slug: { $eq: entry.slug } }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
log(strapi, `${opportunities.length} demo opportunities`);
|
||||||
|
|
||||||
|
const resources = demoResources(now);
|
||||||
|
for (const entry of resources) {
|
||||||
|
await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.resource,
|
||||||
|
withRelations(entry.data, {
|
||||||
|
topics: relate(context.topics, entry.topics),
|
||||||
|
partnerOrganisations: relate(partners, entry.partners),
|
||||||
|
}),
|
||||||
|
{ slug: { $eq: entry.slug } }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
log(strapi, `${resources.length} demo resources`);
|
||||||
|
|
||||||
|
const knowledge = demoKnowledge(now);
|
||||||
|
for (const entry of knowledge) {
|
||||||
|
await upsert(
|
||||||
|
strapi,
|
||||||
|
UID.knowledge,
|
||||||
|
withRelations(entry.data, { topics: relate(context.topics, entry.topics) }),
|
||||||
|
{ slug: { $eq: entry.slug } }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
log(strapi, `${knowledge.length} demo knowledge items`);
|
||||||
|
|
||||||
|
/* Finally the home page, which the demo set only adds to: the status pill,
|
||||||
|
the network logo wall (twelve organisations, which is what turns the wall
|
||||||
|
into the design's marquee), and two network stories beside the real launch
|
||||||
|
article. The hero is rewritten in full, media included, because writing a
|
||||||
|
component replaces it. */
|
||||||
|
const existingHome = await readExisting(strapi, UID.homePage, ['hero.media']);
|
||||||
|
const heroMedia = mediaId(existingHome?.hero, 'media');
|
||||||
|
|
||||||
|
const featured = [
|
||||||
|
context.launchArticleId,
|
||||||
|
newsIndex.get(`${DEMO_PREFIX}first-round-of-sub-projects-selected`),
|
||||||
|
newsIndex.get(`${DEMO_PREFIX}coastal-justice-forum-completes-sub-project`),
|
||||||
|
].filter((id): id is string => Boolean(id));
|
||||||
|
|
||||||
|
const homeFor = (locale: 'en' | 'ar'): SeedData => ({
|
||||||
|
...HOME_PAGE[locale],
|
||||||
|
hero: {
|
||||||
|
...(HOME_PAGE[locale].hero as SeedData),
|
||||||
|
...(DEMO_HOME_PAGE[locale].hero as SeedData),
|
||||||
|
...(heroMedia ? { media: heroMedia } : {}),
|
||||||
|
},
|
||||||
|
featuredNews: featured,
|
||||||
|
partners: relate(partners, DEMO_PARTNER_SLUGS),
|
||||||
|
});
|
||||||
|
|
||||||
|
await upsert(strapi, UID.homePage, { en: homeFor('en'), ar: homeFor('ar') });
|
||||||
|
log(strapi, 'home page, with the demo network wall');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
REMOVING THE DEMO SET
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
async function cleanDemo(strapi: Core.Strapi): Promise<void> {
|
||||||
|
let removed = 0;
|
||||||
|
|
||||||
|
for (const uid of DEMO_SLUGGED_TYPES) {
|
||||||
|
removed += await deleteBySlugPrefix(strapi, uid, DEMO_PREFIX);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Both languages: the filter runs once per locale, and an Arabic question
|
||||||
|
never matches an English one. */
|
||||||
|
removed += await deleteWhere(strapi, UID.faq, {
|
||||||
|
question: {
|
||||||
|
$in: DEMO_FAQS.flatMap((item) => [item.en.question, item.ar.question]),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/* The home page is approved content with demo fields written onto it, so it
|
||||||
|
is put back rather than deleted. Deleting the partners above already
|
||||||
|
emptied the wall; this takes the status pill off again. */
|
||||||
|
const existingHome = await readExisting(strapi, UID.homePage, ['hero.media']);
|
||||||
|
const heroMedia = mediaId(existingHome?.hero, 'media');
|
||||||
|
|
||||||
|
await upsert(strapi, UID.homePage, {
|
||||||
|
en: {
|
||||||
|
...HOME_PAGE.en,
|
||||||
|
hero: { ...(HOME_PAGE.en.hero as SeedData), ...(heroMedia ? { media: heroMedia } : {}) },
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
...HOME_PAGE.ar,
|
||||||
|
hero: { ...(HOME_PAGE.ar.hero as SeedData), ...(heroMedia ? { media: heroMedia } : {}) },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
log(strapi, `removed ${removed} demo entries and reset the home page`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------------------------------
|
||||||
|
ENTRY POINT
|
||||||
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
|
export async function runSeed(strapi: Core.Strapi, options: SeedOptions): Promise<void> {
|
||||||
|
/* The guard that makes demo content safe to have in the repository at all:
|
||||||
|
no flag combination writes invented entries to a production database. */
|
||||||
|
if (options.demo && process.env.NODE_ENV === 'production') {
|
||||||
|
throw new Error(
|
||||||
|
'[seed] refusing to touch demo content with NODE_ENV=production. ' +
|
||||||
|
'Run `pnpm seed` without --demo to write the approved content only.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.clean && !options.demo) {
|
||||||
|
throw new Error(
|
||||||
|
'[seed] --clean removes demo content and nothing else, so it needs --demo. ' +
|
||||||
|
'Approved content is never deleted by the seed.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.clean) {
|
||||||
|
await cleanDemo(strapi);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const context = await seedApproved(strapi);
|
||||||
|
|
||||||
|
if (options.demo) {
|
||||||
|
log(strapi, 'writing DEMO fixtures - invented content, every slug prefixed "demo-"');
|
||||||
|
await seedDemo(strapi, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
log(strapi, 'done.');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Read the options off a process argument list. */
|
||||||
|
export function parseSeedOptions(argv: readonly string[]): SeedOptions {
|
||||||
|
return {
|
||||||
|
demo: argv.includes('--demo'),
|
||||||
|
clean: argv.includes('--clean'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { DemoEntry };
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SEED - idempotent document helpers
|
||||||
|
----------------------------------------------------------------------------
|
||||||
|
Every write in the seed goes through here, so the whole seed can be run
|
||||||
|
again over a database it has already written to and change nothing but the
|
||||||
|
fields it owns. Nothing is ever deleted except demo entries, and only on an
|
||||||
|
explicit `--demo --clean`.
|
||||||
|
|
||||||
|
THE SHAPE OF A WRITE
|
||||||
|
A seed entry is always a pair - the English document and its Arabic
|
||||||
|
translation - because every localised content type on this site ships in
|
||||||
|
both languages (CLAUDE.md rule 7). `upsert` writes the English document
|
||||||
|
first, because that is the one carrying the identity (the slug), then
|
||||||
|
writes the Arabic locale onto the SAME document, which is how Strapi 5
|
||||||
|
models a translation: one `documentId`, one row per locale.
|
||||||
|
|
||||||
|
DRAFT AND PUBLISH
|
||||||
|
Content is written as a draft and then published explicitly. Publishing
|
||||||
|
is a separate call rather than `status: 'published'` on the write, so a
|
||||||
|
half-built entry is never live for the moment between the two locales.
|
||||||
|
|
||||||
|
Two content types - `topic` and `region` - are pure taxonomy and have
|
||||||
|
draft & publish switched off, and a document service for such a type has
|
||||||
|
no `publish` method and no `status` to filter on at all. `usesDraft`
|
||||||
|
below reads that off the schema rather than keeping a list, so a type that
|
||||||
|
gains or loses the setting needs no change here.
|
||||||
|
|
||||||
|
TYPES
|
||||||
|
`strapi.documents(uid)` is generated per content type, so a helper that
|
||||||
|
takes the uid as a parameter cannot be typed against one schema. The
|
||||||
|
single cast below is the seam: past it, the seed's own data is checked by
|
||||||
|
the content files' own types, and Strapi validates the payload at runtime
|
||||||
|
against the real schema - a wrong field name fails the seed loudly.
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
import type { Core } from '@strapi/strapi';
|
||||||
|
|
||||||
|
/** The two locales this site ships. */
|
||||||
|
export const LOCALES = ['en', 'ar'] as const;
|
||||||
|
|
||||||
|
export type SeedLocale = (typeof LOCALES)[number];
|
||||||
|
|
||||||
|
/** One piece of content, written once per locale. */
|
||||||
|
export type Localised<T> = Readonly<Record<SeedLocale, T>>;
|
||||||
|
|
||||||
|
/** A field payload - checked by Strapi against the real schema at runtime. */
|
||||||
|
export type SeedData = Record<string, unknown>;
|
||||||
|
|
||||||
|
/** Any content type uid `strapi.documents()` accepts. */
|
||||||
|
export type SeedUid = Parameters<Core.Strapi['documents']>[0];
|
||||||
|
|
||||||
|
interface SeedDocument {
|
||||||
|
documentId: string;
|
||||||
|
[field: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The document service, minus the per-uid generics.
|
||||||
|
*
|
||||||
|
* See the TYPES note above: this is the one place the seed steps outside
|
||||||
|
* Strapi's generated types, and it is deliberate.
|
||||||
|
*/
|
||||||
|
interface LooseDocumentService {
|
||||||
|
findFirst(params: SeedData): Promise<SeedDocument | null>;
|
||||||
|
findMany(params: SeedData): Promise<SeedDocument[]>;
|
||||||
|
create(params: SeedData): Promise<SeedDocument>;
|
||||||
|
update(params: SeedData): Promise<SeedDocument | null>;
|
||||||
|
delete(params: SeedData): Promise<unknown>;
|
||||||
|
publish(params: SeedData): Promise<unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const documents = (strapi: Core.Strapi, uid: SeedUid): LooseDocumentService =>
|
||||||
|
strapi.documents(uid) as unknown as LooseDocumentService;
|
||||||
|
|
||||||
|
/** Whether this content type has draft & publish, and so a `publish` call. */
|
||||||
|
const usesDraft = (strapi: Core.Strapi, uid: SeedUid): boolean =>
|
||||||
|
Boolean(strapi.contentType(uid).options?.draftAndPublish);
|
||||||
|
|
||||||
|
/** `status: 'draft'`, but only where a status exists to ask about. */
|
||||||
|
const draftFilter = (strapi: Core.Strapi, uid: SeedUid): SeedData =>
|
||||||
|
usesDraft(strapi, uid) ? { status: 'draft' } : {};
|
||||||
|
|
||||||
|
/** What a seed step did, for the run summary. */
|
||||||
|
export interface SeedResult {
|
||||||
|
documentId: string;
|
||||||
|
created: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Write both locales of a document and publish it.
|
||||||
|
*
|
||||||
|
* `find` identifies the entry across runs - a slug for a collection type,
|
||||||
|
* nothing at all for a single type, which has only ever one document. When it
|
||||||
|
* matches nothing the document is created; when it matches, the same fields
|
||||||
|
* are written over the existing one, so an editor's OTHER changes survive a
|
||||||
|
* re-run and the fields the seed owns go back to the seeded value.
|
||||||
|
*/
|
||||||
|
export async function upsert(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
data: Localised<SeedData>,
|
||||||
|
find?: SeedData
|
||||||
|
): Promise<SeedResult> {
|
||||||
|
const service = documents(strapi, uid);
|
||||||
|
|
||||||
|
/* Looked up as a draft: a document that exists but has never been published
|
||||||
|
is still the same document, and creating a second one beside it is how a
|
||||||
|
seed ends up with duplicates. */
|
||||||
|
const existing = await service.findFirst({
|
||||||
|
...(find ? { filters: find } : {}),
|
||||||
|
locale: 'en',
|
||||||
|
...draftFilter(strapi, uid),
|
||||||
|
});
|
||||||
|
|
||||||
|
let documentId: string;
|
||||||
|
let created = false;
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
documentId = existing.documentId;
|
||||||
|
await service.update({ documentId, locale: 'en', data: data.en });
|
||||||
|
} else {
|
||||||
|
const document = await service.create({ locale: 'en', data: data.en });
|
||||||
|
documentId = document.documentId;
|
||||||
|
created = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* An update against a locale the document does not have yet creates that
|
||||||
|
translation - there is no separate "add a locale" call. */
|
||||||
|
await service.update({ documentId, locale: 'ar', data: data.ar });
|
||||||
|
|
||||||
|
if (usesDraft(strapi, uid)) {
|
||||||
|
await service.publish({ documentId, locale: '*' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return { documentId, created };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete the documents a filter matches, in every locale.
|
||||||
|
*
|
||||||
|
* TWO THINGS THE 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:
|
||||||
|
*
|
||||||
|
* 1. `delete({ documentId })` with no locale removes the DEFAULT locale
|
||||||
|
* only, not the document. It takes `locale: '*'` to remove the lot.
|
||||||
|
* 2. `findMany({ locale })` answers for one locale, so a document whose
|
||||||
|
* English half has already gone is invisible to a search in English.
|
||||||
|
* Both locales are searched and the documentIds pooled, which also
|
||||||
|
* sweeps up orphans an earlier, less careful run left.
|
||||||
|
*/
|
||||||
|
async function deleteMatching(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
filters: SeedData
|
||||||
|
): Promise<number> {
|
||||||
|
const service = documents(strapi, uid);
|
||||||
|
const documentIds = new Set<string>();
|
||||||
|
|
||||||
|
for (const locale of LOCALES) {
|
||||||
|
const matches = await service.findMany({
|
||||||
|
filters,
|
||||||
|
locale,
|
||||||
|
...draftFilter(strapi, uid),
|
||||||
|
pagination: { limit: -1 },
|
||||||
|
});
|
||||||
|
for (const match of matches) documentIds.add(match.documentId);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const documentId of documentIds) {
|
||||||
|
await service.delete({ documentId, locale: '*' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return documentIds.size;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete every document of a type whose slug starts with the given prefix.
|
||||||
|
*
|
||||||
|
* This is how `--demo --clean` finds what it planted: the prefix is on the
|
||||||
|
* slug itself, so nothing has to be remembered between runs and an entry an
|
||||||
|
* editor has since renamed out of the prefix is deliberately left alone.
|
||||||
|
*/
|
||||||
|
export async function deleteBySlugPrefix(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
prefix: string
|
||||||
|
): Promise<number> {
|
||||||
|
return deleteMatching(strapi, uid, { slug: { $startsWith: prefix } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete documents matched by an arbitrary filter.
|
||||||
|
*
|
||||||
|
* The FAQ content type has no slug to prefix, so its demo entries are found by
|
||||||
|
* their exact questions instead - in both languages, because the filter is
|
||||||
|
* matched per locale. Anything the seed did not write is left untouched,
|
||||||
|
* because the filter is the seeded list itself.
|
||||||
|
*/
|
||||||
|
export async function deleteWhere(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
filters: SeedData
|
||||||
|
): Promise<number> {
|
||||||
|
return deleteMatching(strapi, uid, filters);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read one field off a single type before overwriting it.
|
||||||
|
*
|
||||||
|
* Used for the media an editor has already uploaded: the seed owns the words
|
||||||
|
* on a page, not the pictures, so it reads the current hero image back and
|
||||||
|
* writes it out again with the new copy rather than dropping it. A component
|
||||||
|
* is replaced wholesale on write, so anything inside it that is not in the
|
||||||
|
* payload is gone.
|
||||||
|
*/
|
||||||
|
export async function readExisting(
|
||||||
|
strapi: Core.Strapi,
|
||||||
|
uid: SeedUid,
|
||||||
|
populate: string[],
|
||||||
|
find?: SeedData
|
||||||
|
): Promise<SeedDocument | null> {
|
||||||
|
return documents(strapi, uid).findFirst({
|
||||||
|
...(find ? { filters: find } : {}),
|
||||||
|
locale: 'en',
|
||||||
|
...draftFilter(strapi, uid),
|
||||||
|
populate,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The id of a media entry nested in a populated component, if there is one. */
|
||||||
|
export function mediaId(component: unknown, field: string): number | undefined {
|
||||||
|
if (!component || typeof component !== 'object') return undefined;
|
||||||
|
const media = (component as Record<string, unknown>)[field];
|
||||||
|
if (!media || typeof media !== 'object') return undefined;
|
||||||
|
const id = (media as Record<string, unknown>).id;
|
||||||
|
return typeof id === 'number' ? id : undefined;
|
||||||
|
}
|
||||||
+16
-28
@@ -96,19 +96,6 @@ export interface BlocksRichText extends Struct.ComponentSchema {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface BlocksStatsGrid extends Struct.ComponentSchema {
|
|
||||||
collectionName: 'components_blocks_stats_grids';
|
|
||||||
info: {
|
|
||||||
description: 'A grid of headline figures.';
|
|
||||||
displayName: 'Stats Grid';
|
|
||||||
icon: 'chartBubble';
|
|
||||||
};
|
|
||||||
attributes: {
|
|
||||||
note: Schema.Attribute.Text;
|
|
||||||
stats: Schema.Attribute.Component<'shared.stat', true>;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BlocksVideoEmbed extends Struct.ComponentSchema {
|
export interface BlocksVideoEmbed extends Struct.ComponentSchema {
|
||||||
collectionName: 'components_blocks_video_embeds';
|
collectionName: 'components_blocks_video_embeds';
|
||||||
info: {
|
info: {
|
||||||
@@ -150,6 +137,21 @@ export interface NavigationNavGroup extends Struct.ComponentSchema {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface PageBandIntro extends Struct.ComponentSchema {
|
||||||
|
collectionName: 'components_page_band_intros';
|
||||||
|
info: {
|
||||||
|
description: 'The heading, lead and pictures of a page band, in one place so an editor is not hunting for half of it in the Blocks zone.';
|
||||||
|
displayName: 'Band intro';
|
||||||
|
icon: 'layer';
|
||||||
|
};
|
||||||
|
attributes: {
|
||||||
|
eyebrow: Schema.Attribute.String;
|
||||||
|
heading: Schema.Attribute.String;
|
||||||
|
images: Schema.Attribute.Media<'images', true>;
|
||||||
|
lead: Schema.Attribute.Text;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export interface PageConsortiumMember extends Struct.ComponentSchema {
|
export interface PageConsortiumMember extends Struct.ComponentSchema {
|
||||||
collectionName: 'components_page_consortium_members';
|
collectionName: 'components_page_consortium_members';
|
||||||
info: {
|
info: {
|
||||||
@@ -297,19 +299,6 @@ export interface SharedSeo extends Struct.ComponentSchema {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SharedStat extends Struct.ComponentSchema {
|
|
||||||
collectionName: 'components_shared_stats';
|
|
||||||
info: {
|
|
||||||
description: 'A single headline figure, e.g. 64 / CSO Partners.';
|
|
||||||
displayName: 'Stat';
|
|
||||||
icon: 'chartBubble';
|
|
||||||
};
|
|
||||||
attributes: {
|
|
||||||
label: Schema.Attribute.String & Schema.Attribute.Required;
|
|
||||||
value: Schema.Attribute.String & Schema.Attribute.Required;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SharedTitledText extends Struct.ComponentSchema {
|
export interface SharedTitledText extends Struct.ComponentSchema {
|
||||||
collectionName: 'components_shared_titled_texts';
|
collectionName: 'components_shared_titled_texts';
|
||||||
info: {
|
info: {
|
||||||
@@ -333,10 +322,10 @@ declare module '@strapi/strapi' {
|
|||||||
'blocks.partner-logos': BlocksPartnerLogos;
|
'blocks.partner-logos': BlocksPartnerLogos;
|
||||||
'blocks.quote': BlocksQuote;
|
'blocks.quote': BlocksQuote;
|
||||||
'blocks.rich-text': BlocksRichText;
|
'blocks.rich-text': BlocksRichText;
|
||||||
'blocks.stats-grid': BlocksStatsGrid;
|
|
||||||
'blocks.video-embed': BlocksVideoEmbed;
|
'blocks.video-embed': BlocksVideoEmbed;
|
||||||
'navigation.footer-column': NavigationFooterColumn;
|
'navigation.footer-column': NavigationFooterColumn;
|
||||||
'navigation.nav-group': NavigationNavGroup;
|
'navigation.nav-group': NavigationNavGroup;
|
||||||
|
'page.band-intro': PageBandIntro;
|
||||||
'page.consortium-member': PageConsortiumMember;
|
'page.consortium-member': PageConsortiumMember;
|
||||||
'page.workstream': PageWorkstream;
|
'page.workstream': PageWorkstream;
|
||||||
'shared.accordion-item': SharedAccordionItem;
|
'shared.accordion-item': SharedAccordionItem;
|
||||||
@@ -346,7 +335,6 @@ declare module '@strapi/strapi' {
|
|||||||
'shared.hero': SharedHero;
|
'shared.hero': SharedHero;
|
||||||
'shared.link': SharedLink;
|
'shared.link': SharedLink;
|
||||||
'shared.seo': SharedSeo;
|
'shared.seo': SharedSeo;
|
||||||
'shared.stat': SharedStat;
|
|
||||||
'shared.titled-text': SharedTitledText;
|
'shared.titled-text': SharedTitledText;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-12
@@ -464,7 +464,6 @@ export interface ApiAboutPageAboutPage extends Struct.SingleTypeSchema {
|
|||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
@@ -588,7 +587,6 @@ export interface ApiActivityActivity extends Struct.CollectionTypeSchema {
|
|||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
@@ -1165,11 +1163,16 @@ export interface ApiHomePageHomePage extends Struct.SingleTypeSchema {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
attributes: {
|
attributes: {
|
||||||
|
approach: Schema.Attribute.Component<'page.band-intro', false> &
|
||||||
|
Schema.Attribute.SetPluginOptions<{
|
||||||
|
i18n: {
|
||||||
|
localized: true;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
blocks: Schema.Attribute.DynamicZone<
|
blocks: Schema.Attribute.DynamicZone<
|
||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
@@ -1216,12 +1219,6 @@ export interface ApiHomePageHomePage extends Struct.SingleTypeSchema {
|
|||||||
localized: true;
|
localized: true;
|
||||||
};
|
};
|
||||||
}>;
|
}>;
|
||||||
stats: Schema.Attribute.Component<'shared.stat', true> &
|
|
||||||
Schema.Attribute.SetPluginOptions<{
|
|
||||||
i18n: {
|
|
||||||
localized: true;
|
|
||||||
};
|
|
||||||
}>;
|
|
||||||
updatedAt: Schema.Attribute.DateTime;
|
updatedAt: Schema.Attribute.DateTime;
|
||||||
updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
|
updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
|
||||||
Schema.Attribute.Private;
|
Schema.Attribute.Private;
|
||||||
@@ -1256,7 +1253,6 @@ export interface ApiKnowledgeItemKnowledgeItem
|
|||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
@@ -1389,7 +1385,6 @@ export interface ApiNewsArticleNewsArticle extends Struct.CollectionTypeSchema {
|
|||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
@@ -2134,7 +2129,6 @@ export interface ApiWhatWeDoPageWhatWeDoPage extends Struct.SingleTypeSchema {
|
|||||||
[
|
[
|
||||||
'blocks.rich-text',
|
'blocks.rich-text',
|
||||||
'blocks.image-gallery',
|
'blocks.image-gallery',
|
||||||
'blocks.stats-grid',
|
|
||||||
'blocks.cta-banner',
|
'blocks.cta-banner',
|
||||||
'blocks.card-grid',
|
'blocks.card-grid',
|
||||||
'blocks.quote',
|
'blocks.quote',
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
/* ============================================================================
|
|
||||||
Card.Stat - Figma 25:792 (260 x 166)
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
The figure card used by the home page stats strip: a large accent number,
|
|
||||||
an optional trend chip, the label it counts, a rule and a caption. Never a
|
|
||||||
link - a number is not a destination.
|
|
||||||
|
|
||||||
USAGE
|
|
||||||
-----
|
|
||||||
<ul className="grid gap-lg sm:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<Card.Stat
|
|
||||||
as="li"
|
|
||||||
value="2,450"
|
|
||||||
label="Participants reached"
|
|
||||||
caption="Cumulative regional outreach, updated each quarter."
|
|
||||||
trend={{ label: "12%", direction: "up", description: "up 12% on last quarter" }}
|
|
||||||
/>
|
|
||||||
<Card.Stat as="li" value="18" label="Municipalities engaged" />
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
// Arabic - Eastern Arabic numerals belong in the value string itself.
|
|
||||||
<Card.Stat value="٢٬٤٥٠" label="عدد المشاركين" />
|
|
||||||
========================================================================= */
|
|
||||||
|
|
||||||
import { CardIcon, CardShell, cx } from "./CardShell";
|
|
||||||
import type { CardElement } from "./types";
|
|
||||||
|
|
||||||
export interface CardStatTrend {
|
|
||||||
/** Visible text, e.g. "12%". */
|
|
||||||
label: string;
|
|
||||||
/** Up is the accent fill, down the danger fill. Defaults to up. */
|
|
||||||
direction?: "up" | "down";
|
|
||||||
/**
|
|
||||||
* Spoken instead of the bare figure, e.g. "up 12% on last quarter". The
|
|
||||||
* arrow is decorative, so without this a screen reader hears only "12%".
|
|
||||||
*/
|
|
||||||
description?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CardStatProps {
|
|
||||||
/** Pre-formatted for the locale - the card never formats a number itself. */
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
caption?: string;
|
|
||||||
trend?: CardStatTrend;
|
|
||||||
as?: CardElement;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CardStat({
|
|
||||||
value,
|
|
||||||
label,
|
|
||||||
caption,
|
|
||||||
trend,
|
|
||||||
as = "article",
|
|
||||||
className,
|
|
||||||
}: CardStatProps) {
|
|
||||||
const isDown = trend?.direction === "down";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CardShell
|
|
||||||
as={as}
|
|
||||||
className={cx("flex-col items-start gap-md p-lg", className)}
|
|
||||||
>
|
|
||||||
<div className="flex w-full items-center justify-between gap-sm">
|
|
||||||
<p className="display-sm tabular-nums text-text-accent">{value}</p>
|
|
||||||
|
|
||||||
{trend ? (
|
|
||||||
/* Figma paints the chip label in text/accent on a background/accent
|
|
||||||
fill - green on green, invisible. Kept as the accent fill with the
|
|
||||||
always-white on-accent label, and the danger fill when the figure
|
|
||||||
is falling. */
|
|
||||||
<span
|
|
||||||
className={cx(
|
|
||||||
"inline-flex shrink-0 items-center gap-2xs rounded-chip px-xs py-2xs",
|
|
||||||
"label-md text-text-on-accent",
|
|
||||||
isDown ? "bg-surface-danger" : "bg-surface-accent",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CardIcon
|
|
||||||
name="arrow-up"
|
|
||||||
size={10}
|
|
||||||
className={isDown ? "rotate-180" : undefined}
|
|
||||||
/>
|
|
||||||
{trend.description ? (
|
|
||||||
<>
|
|
||||||
<span aria-hidden="true">{trend.label}</span>
|
|
||||||
<span className="sr-only">{trend.description}</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
trend.label
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="body-md-bold text-text-primary">{label}</p>
|
|
||||||
|
|
||||||
<div aria-hidden="true" className="w-full border-t border-border-subtle" />
|
|
||||||
|
|
||||||
{caption ? (
|
|
||||||
<p className="body-sm text-text-secondary">{caption}</p>
|
|
||||||
) : null}
|
|
||||||
</CardShell>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,16 +1,19 @@
|
|||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
CARD - Figma frame 25:809
|
CARD - Figma frame 25:809
|
||||||
----------------------------------------------------------------------------
|
----------------------------------------------------------------------------
|
||||||
Five card types that share one surface, one link mechanism and one icon
|
Four card types that share one surface, one link mechanism and one icon
|
||||||
strategy. Import the namespace for readable markup:
|
strategy. Import the namespace for readable markup:
|
||||||
|
|
||||||
import { Card } from "~/components/ui/Card";
|
import { Card } from "~/components/ui/Card";
|
||||||
<Card.Content … /> <Card.Team … /> <Card.Horizontal … />
|
<Card.Content … /> <Card.Team … />
|
||||||
<Card.Stat … /> <Card.CTA … />
|
<Card.Horizontal … /> <Card.CTA … />
|
||||||
|
|
||||||
or the components directly when you want the narrowest import:
|
or the components directly when you want the narrowest import:
|
||||||
|
|
||||||
import { CardStat } from "~/components/ui/Card";
|
import { CardTeam } from "~/components/ui/Card";
|
||||||
|
|
||||||
|
The fifth, Card.Stat, is gone along with the rest of the project's figures
|
||||||
|
machinery: no approved document carries a number, so nothing drew it.
|
||||||
|
|
||||||
Every card is correct on both surfaces without a prop: colour comes only
|
Every card is correct on both surfaces without a prop: colour comes only
|
||||||
from tier-2 roles, which [data-surface="dark"] and [data-surface="light"]
|
from tier-2 roles, which [data-surface="dark"] and [data-surface="light"]
|
||||||
@@ -20,7 +23,6 @@
|
|||||||
export { CardContent } from "./CardContent";
|
export { CardContent } from "./CardContent";
|
||||||
export { CardTeam } from "./CardTeam";
|
export { CardTeam } from "./CardTeam";
|
||||||
export { CardHorizontal } from "./CardHorizontal";
|
export { CardHorizontal } from "./CardHorizontal";
|
||||||
export { CardStat } from "./CardStat";
|
|
||||||
export { CardCTA } from "./CardCTA";
|
export { CardCTA } from "./CardCTA";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -39,7 +41,6 @@ export type {
|
|||||||
CardTeamSocialKind,
|
CardTeamSocialKind,
|
||||||
} from "./CardTeam";
|
} from "./CardTeam";
|
||||||
export type { CardHorizontalProps } from "./CardHorizontal";
|
export type { CardHorizontalProps } from "./CardHorizontal";
|
||||||
export type { CardStatProps, CardStatTrend } from "./CardStat";
|
|
||||||
export type { CardCTAProps, CardCTAAction } from "./CardCTA";
|
export type { CardCTAProps, CardCTAAction } from "./CardCTA";
|
||||||
export type {
|
export type {
|
||||||
CardShellProps,
|
CardShellProps,
|
||||||
@@ -58,14 +59,12 @@ export type {
|
|||||||
import { CardContent } from "./CardContent";
|
import { CardContent } from "./CardContent";
|
||||||
import { CardTeam } from "./CardTeam";
|
import { CardTeam } from "./CardTeam";
|
||||||
import { CardHorizontal } from "./CardHorizontal";
|
import { CardHorizontal } from "./CardHorizontal";
|
||||||
import { CardStat } from "./CardStat";
|
|
||||||
import { CardCTA } from "./CardCTA";
|
import { CardCTA } from "./CardCTA";
|
||||||
|
|
||||||
/** The card family, namespaced: Card.Content, Card.Team, Card.Horizontal, Card.Stat, Card.CTA. */
|
/** The card family, namespaced: Card.Content, Card.Team, Card.Horizontal, Card.CTA. */
|
||||||
export const Card = {
|
export const Card = {
|
||||||
Content: CardContent,
|
Content: CardContent,
|
||||||
Team: CardTeam,
|
Team: CardTeam,
|
||||||
Horizontal: CardHorizontal,
|
Horizontal: CardHorizontal,
|
||||||
Stat: CardStat,
|
|
||||||
CTA: CardCTA,
|
CTA: CardCTA,
|
||||||
} as const;
|
} as const;
|
||||||
|
|||||||
@@ -287,7 +287,9 @@ function SocialButton({ link }: { link: FooterSocialLink }) {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<FooterSocialIcon platform={link.platform} className="h-[17px] w-[17px]" />
|
<FooterSocialIcon platform={link.platform} className="h-[17px] w-[17px]" />
|
||||||
<span className="body-sm-bold">{link.label}</span>
|
{/* The label never wraps under its own icon: "Follow us on Facebook" is
|
||||||
|
one line at every width, as the draft has it. */}
|
||||||
|
<span className="body-sm-bold whitespace-nowrap">{link.label}</span>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,7 +42,11 @@ export interface AccordionProps {
|
|||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** The +/- mark. The upright bar collapses as the question opens. */
|
/**
|
||||||
|
* The +/- mark. The upright bar collapses as the question opens, and the whole
|
||||||
|
* mark turns half a revolution with it - the design draft's own gesture, which
|
||||||
|
* carries the change of state even where the thin bar is hard to follow.
|
||||||
|
*/
|
||||||
function ToggleMark({ open }: { open: boolean }) {
|
function ToggleMark({ open }: { open: boolean }) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
@@ -50,8 +54,8 @@ function ToggleMark({ open }: { open: boolean }) {
|
|||||||
className={cx(
|
className={cx(
|
||||||
"flex size-8 shrink-0 items-center justify-center rounded-pill",
|
"flex size-8 shrink-0 items-center justify-center rounded-pill",
|
||||||
"border border-[var(--border-default)] text-[var(--text-accent)]",
|
"border border-[var(--border-default)] text-[var(--text-accent)]",
|
||||||
"transition-colors duration-[var(--motion-duration-base)]",
|
"transition duration-[var(--motion-duration-base)]",
|
||||||
open && "border-[var(--border-accent)] bg-[var(--surface-accent-subtle)]",
|
open && "rotate-180 border-[var(--border-accent)] bg-[var(--surface-accent-subtle)]",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
||||||
|
|||||||
@@ -38,11 +38,19 @@ export interface CmsHero {
|
|||||||
readonly ctas?: readonly CmsCta[] | null;
|
readonly ctas?: readonly CmsCta[] | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** shared.stat - `value` is authored as a string so "48%" and "1,583" survive. */
|
/**
|
||||||
export interface CmsStat {
|
* page.band-intro - a page band's own heading, lead and pictures.
|
||||||
|
*
|
||||||
|
* It exists so a band is edited in one place. The alternative - a headline in
|
||||||
|
* one field and its pictures somewhere down the Blocks zone - is how an editor
|
||||||
|
* ends up unable to find half of a section.
|
||||||
|
*/
|
||||||
|
export interface CmsBandIntro {
|
||||||
readonly id?: number;
|
readonly id?: number;
|
||||||
readonly value: string;
|
readonly eyebrow?: string | null;
|
||||||
readonly label: string;
|
readonly heading?: string | null;
|
||||||
|
readonly lead?: string | null;
|
||||||
|
readonly images?: readonly StrapiMedia[] | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** shared.titled-text - pillars and principles. */
|
/** shared.titled-text - pillars and principles. */
|
||||||
@@ -175,7 +183,8 @@ export interface CmsFaq extends StrapiEntity {
|
|||||||
/** api::home-page.home-page */
|
/** api::home-page.home-page */
|
||||||
export interface CmsHomePage extends StrapiEntity {
|
export interface CmsHomePage extends StrapiEntity {
|
||||||
readonly hero?: CmsHero | null;
|
readonly hero?: CmsHero | null;
|
||||||
readonly stats?: readonly CmsStat[] | null;
|
/** The band under the hero - "A nationwide project, delivered locally". */
|
||||||
|
readonly approach?: CmsBandIntro | null;
|
||||||
readonly blocks?: readonly CmsBlock[] | null;
|
readonly blocks?: readonly CmsBlock[] | null;
|
||||||
/** Curated newsroom picks; the page falls back to the latest articles. */
|
/** Curated newsroom picks; the page falls back to the latest articles. */
|
||||||
readonly featuredNews?: readonly CmsNewsArticle[] | null;
|
readonly featuredNews?: readonly CmsNewsArticle[] | null;
|
||||||
|
|||||||
@@ -2,14 +2,17 @@
|
|||||||
PAGE COPY - EN / AR
|
PAGE COPY - EN / AR
|
||||||
----------------------------------------------------------------------------
|
----------------------------------------------------------------------------
|
||||||
SOURCE
|
SOURCE
|
||||||
Home page Figma frame 253:4799 "Home-en" is the source of truth.
|
Home page The Claude Design draft "Home page redesign with news
|
||||||
The headline (I253:4800;228:2609), the launch heading
|
and FAQs" (third drop) is the source of truth. Its
|
||||||
(I361:10853;361:11147), the one-paragraph launch lead
|
headline, lead, primary call to action and the
|
||||||
with its four bold runs (I361:10853;349:8838) and the
|
"nationwide project, delivered locally" band are
|
||||||
three captions are transcribed from that frame, NOT
|
transcribed from that draft, NOT from docs/SHARPER Home
|
||||||
from docs/SHARPER Home Page .docx - the design condenses
|
Page .docx - the design condenses the draft, and the
|
||||||
the draft, and the draft itself is headed "Placeholder
|
draft itself is headed "Placeholder text for design
|
||||||
text for design purposes - not final copy".
|
purposes - not final copy". Every claim in it is
|
||||||
|
nonetheless in docs/: the consortium, the partner
|
||||||
|
groups it works with, the EU funding and the December
|
||||||
|
2027 end date.
|
||||||
Everything else docs/SHARPER_Website_Draft_Section_EN_AR.docx
|
Everything else docs/SHARPER_Website_Draft_Section_EN_AR.docx
|
||||||
(sections 1, 2 and 9), which carries both columns, so
|
(sections 1, 2 and 9), which carries both columns, so
|
||||||
no string below is a machine translation of the other
|
no string below is a machine translation of the other
|
||||||
@@ -32,8 +35,9 @@
|
|||||||
Figures. The draft marks every number "TBD" and says they must not be
|
Figures. The draft marks every number "TBD" and says they must not be
|
||||||
published until confirmed, so there is no statistic anywhere in this file.
|
published until confirmed, so there is no statistic anywhere in this file.
|
||||||
Figma hides the home page's figures band outright (frame 253:4835 is
|
Figma hides the home page's figures band outright (frame 253:4835 is
|
||||||
hidden="true"), so the band renders only once the CMS `stats` component
|
hidden="true") and the third design drop deletes it, so the band is gone
|
||||||
supplies real numbers, and nothing stands in for it until then.
|
from the page and the `stats` component is gone from the CMS. There is
|
||||||
|
nowhere left for a figure to be typed in, which is the point.
|
||||||
========================================================================= */
|
========================================================================= */
|
||||||
|
|
||||||
import type { Locale } from "~/i18n";
|
import type { Locale } from "~/i18n";
|
||||||
@@ -69,17 +73,13 @@ export interface HomeCopy {
|
|||||||
readonly heroCtaPrimary: string;
|
readonly heroCtaPrimary: string;
|
||||||
readonly heroCtaSecondary: string;
|
readonly heroCtaSecondary: string;
|
||||||
/**
|
/**
|
||||||
* The figures band. Bundled so the band is never empty, and overridden by
|
* The band under the hero picture: what the project is and who delivers it.
|
||||||
* `home-page.stats` the moment an editor writes one. Every figure here is
|
* It replaces the launch-event band of the previous drop, which had dated
|
||||||
* verifiable: three consortium members and the Dec 2025 - Dec 2027 run come
|
* the whole home page to a single day in June.
|
||||||
* from the project brief, the four areas of work are the What We Do
|
|
||||||
* workstreams, and the sixteen human security sub-projects are the approved
|
|
||||||
* EN/AR draft's own wording.
|
|
||||||
*/
|
*/
|
||||||
readonly stats: readonly { readonly value: string; readonly label: string }[];
|
readonly approachEyebrow: string;
|
||||||
readonly launchEyebrow: string;
|
readonly approachHeading: string;
|
||||||
readonly launchHeading: string;
|
readonly approachLead: string;
|
||||||
readonly launchLead: string;
|
|
||||||
readonly workHeading: string;
|
readonly workHeading: string;
|
||||||
readonly workLinkLabel: string;
|
readonly workLinkLabel: string;
|
||||||
readonly newsEyebrow: string;
|
readonly newsEyebrow: string;
|
||||||
@@ -194,21 +194,17 @@ export interface PageCopy {
|
|||||||
|
|
||||||
const EN: PageCopy = {
|
const EN: PageCopy = {
|
||||||
home: {
|
home: {
|
||||||
heroHeadline: "SHARP-ER Project Officially Launches in Libya",
|
heroHeadline: "Advancing Justice and Accountability, Led by Libyan Communities",
|
||||||
heroLead:
|
heroLead:
|
||||||
"Shared Action on Rule of Law Progress — Exit Route: a nationwide initiative supporting Libya’s civil society, local institutions, and communities in advancing justice, accountability, and good governance.",
|
"SHARP-ER — Shared Action on Rule of Law Progress, Exit Route — works with civil society organisations, municipalities, and community leaders across Libya to strengthen access to justice, accountability, and local governance. Funded by the European Union, running to December 2027.",
|
||||||
heroCtaPrimary: "Expression of Interest",
|
heroCtaPrimary: "See open calls",
|
||||||
heroCtaSecondary: "About the project",
|
heroCtaSecondary: "About the project",
|
||||||
stats: [
|
approachEyebrow: "Nationwide, Libya",
|
||||||
{ value: "3", label: "Consortium partners" },
|
/* The same sentence the About page heads its body with - one project, one
|
||||||
{ value: "4", label: "Areas of work" },
|
description of it. */
|
||||||
{ value: "16", label: "Human security sub-projects" },
|
approachHeading: "A nationwide project, delivered locally",
|
||||||
{ value: "25 mo", label: "Dec 2025 – Dec 2027" },
|
approachLead:
|
||||||
],
|
"Local organisations lead the design and delivery of the work. SHARP-ER partners with Libyan civil society, municipalities, and community leaders — through funded sub-projects, training, and open dialogue between communities and the institutions that serve them.",
|
||||||
launchEyebrow: "30 June · Launch event",
|
|
||||||
launchHeading: "An important start for the project",
|
|
||||||
launchLead:
|
|
||||||
"The launch brought together representatives from the European Union Delegation, the Ministry of Youth, the Ministry of Local Governance, the Ministry of Women’s Affairs, civil society organisations, partners, and stakeholders from across Libya. The event marked the opening of the Expression of Interest and the launch of this website.",
|
|
||||||
workHeading: "Three areas of change",
|
workHeading: "Three areas of change",
|
||||||
workLinkLabel: "What we do",
|
workLinkLabel: "What we do",
|
||||||
newsEyebrow: "Newsroom",
|
newsEyebrow: "Newsroom",
|
||||||
@@ -383,23 +379,17 @@ const EN: PageCopy = {
|
|||||||
|
|
||||||
const AR: PageCopy = {
|
const AR: PageCopy = {
|
||||||
home: {
|
home: {
|
||||||
heroHeadline: "انطلاق مشروع SHARP-ER رسميًا في ليبيا",
|
heroHeadline: "تعزيز العدالة والمساءلة بقيادة المجتمعات الليبية",
|
||||||
heroLead:
|
heroLead:
|
||||||
"العمل المشترك لتعزيز سيادة القانون – مسار الخروج: مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات في ليبيا في تعزيز العدالة والمساءلة والحوكمة الرشيدة.",
|
"يعمل SHARP-ER — العمل المشترك لتعزيز سيادة القانون، مسار الخروج — مع منظمات المجتمع المدني والبلديات وقادة المجتمعات في مختلف أنحاء ليبيا على تعزيز الوصول إلى العدالة والمساءلة والحوكمة المحلية. بتمويل من الاتحاد الأوروبي، ويستمر حتى ديسمبر 2027.",
|
||||||
heroCtaPrimary: "الدعوة للتعبير عن الاهتمام",
|
heroCtaPrimary: "اطّلع على الدعوات المفتوحة",
|
||||||
heroCtaSecondary: "عن المشروع",
|
heroCtaSecondary: "عن المشروع",
|
||||||
/* Western digits, as the rest of the Arabic draft writes its numbers
|
/* The same two lines the About page uses for its coverage fact and its
|
||||||
("ديسمبر 2025", "SHARP I and II (2019–2024)"). */
|
body heading, so the Arabic reads identically on both pages. */
|
||||||
stats: [
|
approachEyebrow: "على مستوى ليبيا بأكملها",
|
||||||
{ value: "3", label: "شركاء الائتلاف" },
|
approachHeading: "مشروع وطني يُنفَّذ محليًا",
|
||||||
{ value: "4", label: "مجالات العمل" },
|
approachLead:
|
||||||
{ value: "16", label: "مشروعًا فرعيًا للأمن الإنساني" },
|
"تتولّى المنظمات المحلية تصميم العمل وتنفيذه. ويعمل SHARP-ER بالشراكة مع المجتمع المدني الليبي والبلديات وقادة المجتمعات، من خلال المشاريع الفرعية المموَّلة، والتدريب، والحوار المفتوح بين المجتمعات والمؤسسات التي تخدمها.",
|
||||||
{ value: "25 شهرًا", label: "ديسمبر 2025 – ديسمبر 2027" },
|
|
||||||
],
|
|
||||||
launchEyebrow: "30 يونيو · فعالية الإطلاق",
|
|
||||||
launchHeading: "بداية مهمة للمشروع",
|
|
||||||
launchLead:
|
|
||||||
"جمعت فعالية الإطلاق ممثلين عن بعثة الاتحاد الأوروبي، ووزارة الشباب، ووزارة الحكم المحلي، ووزارة شؤون المرأة، ومنظمات المجتمع المدني، والشركاء، وأصحاب المصلحة من مختلف أنحاء ليبيا. وشهد الحدث افتتاح الدعوة للتعبير عن الاهتمام وإطلاق هذا الموقع الإلكتروني.",
|
|
||||||
workHeading: "ثلاثة مجالات للتغيير",
|
workHeading: "ثلاثة مجالات للتغيير",
|
||||||
workLinkLabel: "ماذا نفعل",
|
workLinkLabel: "ماذا نفعل",
|
||||||
newsEyebrow: "غرفة الأخبار",
|
newsEyebrow: "غرفة الأخبار",
|
||||||
|
|||||||
@@ -23,11 +23,12 @@
|
|||||||
scroll block is additionally gated on `prefers-reduced-motion: no-preference`
|
scroll block is additionally gated on `prefers-reduced-motion: no-preference`
|
||||||
so a reduced-motion visitor never gets a timeline-driven opacity ramp at all.
|
so a reduced-motion visitor never gets a timeline-driven opacity ramp at all.
|
||||||
|
|
||||||
DIRECTION: `transform-origin` and `linear-gradient()` have no logical
|
DIRECTION: `transform-origin`, `linear-gradient()`, `clip-path: inset()` and
|
||||||
keywords, so the progress bar and the brand stripe carry an explicit RTL
|
`translateX()` have no logical keywords, so the progress bar, the brand
|
||||||
override. These are the only physical directions in the file, and they exist
|
stripe, the headline wipe, the hover rule and the logo marquee each carry an
|
||||||
because the property itself has no logical form - every box edge elsewhere is
|
explicit RTL override. These are the only physical directions in the file,
|
||||||
still ps-/pe-/start-/end-.
|
and they exist because the property itself has no logical form - every box
|
||||||
|
edge elsewhere is still ps-/pe-/start-/end-.
|
||||||
========================================================================= */
|
========================================================================= */
|
||||||
|
|
||||||
@layer theme, base, components, utilities;
|
@layer theme, base, components, utilities;
|
||||||
@@ -59,6 +60,33 @@
|
|||||||
--sh-rise-delay: calc(var(--motion-duration-fast) * 3);
|
--sh-rise-delay: calc(var(--motion-duration-fast) * 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The home headline. The third design drop stops lifting it and uncovers it
|
||||||
|
instead, from the inline start, so the words are read into place rather
|
||||||
|
than slid in. It reads the SAME `--sh-rise-delay` as the cascade above, so
|
||||||
|
`.sh-rise--3` &c. stagger the wipe alongside everything else. */
|
||||||
|
.sh-wipe {
|
||||||
|
animation: sh-wipe var(--motion-duration-reveal) var(--motion-ease-entrance)
|
||||||
|
var(--sh-rise-delay, 0ms) backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] .sh-wipe {
|
||||||
|
animation-name: sh-wipe-rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* `backwards`, not `both`: the clip has to be GONE once the wipe is over.
|
||||||
|
`inset(0)` at rest would keep clipping to the border box, which shaves a
|
||||||
|
descender or an Arabic mark off a tight heading line. */
|
||||||
|
|
||||||
|
/* app.css shortens every animation but leaves its delay alone, which for a
|
||||||
|
clip means the headline is not merely faded but absent until the delay has
|
||||||
|
passed. Removing the animation outright puts the words on screen from the
|
||||||
|
first paint, which is what a reduced-motion reader asked for. */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sh-wipe {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* The brand stripe under the hero picture, drawn on from the inline start. */
|
/* The brand stripe under the hero picture, drawn on from the inline start. */
|
||||||
.sh-bar-grow {
|
.sh-bar-grow {
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
@@ -93,6 +121,69 @@
|
|||||||
infinite;
|
infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The network logo wall, drifting past. The track carries the tiles TWICE,
|
||||||
|
so moving it exactly half its own width lands on an identical frame and
|
||||||
|
the loop never shows a seam; 42.5x the reveal duration is the draft's 34s
|
||||||
|
at the shipped token.
|
||||||
|
|
||||||
|
`width` is set here rather than with a `w-max` utility on purpose: the
|
||||||
|
reduced-motion block below has to be able to take it back, and a utility
|
||||||
|
sits in a later layer than this one.
|
||||||
|
|
||||||
|
It stops under the pointer and whenever anything inside it takes focus, so
|
||||||
|
a reader can hold the movement still to look at - or tab to - a logo
|
||||||
|
(WCAG 2.2.2). Under reduced motion it stops being a track at all: the row
|
||||||
|
simply wraps and the duplicate half is removed, so nothing moves and no
|
||||||
|
logo is shown twice. */
|
||||||
|
.sh-marquee {
|
||||||
|
width: max-content;
|
||||||
|
animation: sh-marquee calc(var(--motion-duration-reveal) * 42.5) linear
|
||||||
|
infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RTL reads the other way, so the drift does too. */
|
||||||
|
[dir="rtl"] .sh-marquee {
|
||||||
|
animation-name: sh-marquee-rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sh-marquee:hover,
|
||||||
|
.sh-marquee:focus-within {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.sh-marquee {
|
||||||
|
width: auto;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sh-marquee__clone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The wall fades out at both ends instead of being cut off mid-tile. `black`
|
||||||
|
and `transparent` here are alpha, not colour - a mask reads the channel
|
||||||
|
only - which is why this is not a surface token. The ramp is symmetric, so
|
||||||
|
it needs no RTL form. */
|
||||||
|
.sh-marquee-mask {
|
||||||
|
-webkit-mask-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
transparent,
|
||||||
|
black 8%,
|
||||||
|
black 92%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
transparent,
|
||||||
|
black 8%,
|
||||||
|
black 92%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------
|
/* -------------------------------------------------------------------------
|
||||||
INTERACTION
|
INTERACTION
|
||||||
---------------------------------------------------------------------- */
|
---------------------------------------------------------------------- */
|
||||||
@@ -112,6 +203,56 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* A picture pushing in a little while the frame around it is hovered. The
|
||||||
|
frame clips, so the picture grows into its own box and not over the page.
|
||||||
|
Paired with .sh-lift the tile rises and its picture closes in, which is
|
||||||
|
how the draft hovers the gallery. */
|
||||||
|
.sh-zoom {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sh-zoom img {
|
||||||
|
transition: transform var(--motion-duration-slow)
|
||||||
|
var(--motion-ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.sh-zoom:hover img {
|
||||||
|
transform: scale(1.09);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* An accent rule drawn across the top of a tile under the pointer, growing
|
||||||
|
from the inline start. It is a pseudo-element so the tile's own markup
|
||||||
|
stays a heading and a paragraph. */
|
||||||
|
.sh-rule-top {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sh-rule-top::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
block-size: 3px;
|
||||||
|
background: var(--surface-accent);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left center;
|
||||||
|
transition: transform var(--motion-duration-slow)
|
||||||
|
var(--motion-ease-entrance);
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] .sh-rule-top::before {
|
||||||
|
transform-origin: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.sh-rule-top:hover::before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* An FAQ answer opening under its question. */
|
/* An FAQ answer opening under its question. */
|
||||||
.sh-answer {
|
.sh-answer {
|
||||||
animation: sh-answer var(--motion-duration-base) var(--motion-ease-entrance)
|
animation: sh-answer var(--motion-duration-base) var(--motion-ease-entrance)
|
||||||
@@ -134,6 +275,16 @@
|
|||||||
animation-name: sh-reveal-in;
|
animation-name: sh-reveal-in;
|
||||||
animation-range: entry 0% entry 80%;
|
animation-range: entry 0% entry 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The hero picture drifting as the page scrolls past it. It is scaled up
|
||||||
|
before it travels, so the drift can never uncover an edge of the
|
||||||
|
frame. Chromium-only, like every timeline here: elsewhere the picture
|
||||||
|
simply sits still, which is the state the design falls back to. */
|
||||||
|
.sh-pan {
|
||||||
|
animation: sh-pan linear both;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry 100% exit 0%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (animation-timeline: scroll()) {
|
@supports (animation-timeline: scroll()) {
|
||||||
@@ -236,6 +387,60 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes sh-wipe {
|
||||||
|
from {
|
||||||
|
opacity: 0.4;
|
||||||
|
clip-path: inset(0 100% 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
clip-path: inset(0 0 0 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sh-wipe-rtl {
|
||||||
|
from {
|
||||||
|
opacity: 0.4;
|
||||||
|
clip-path: inset(0 0 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
clip-path: inset(0 0 0 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sh-marquee {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sh-marquee-rtl {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sh-pan {
|
||||||
|
from {
|
||||||
|
transform: translateY(-5%) scale(1.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateY(5%) scale(1.14);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes sh-answer {
|
@keyframes sh-answer {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@@ -393,6 +393,12 @@ export function PageHero({
|
|||||||
const rise = (step?: 2 | 3 | 4 | 5) =>
|
const rise = (step?: 2 | 3 | 4 | 5) =>
|
||||||
reveal ? cx("sh-rise", step && `sh-rise--${step}`) : undefined;
|
reveal ? cx("sh-rise", step && `sh-rise--${step}`) : undefined;
|
||||||
|
|
||||||
|
/* The same cascade, uncovering the words instead of lifting them - the
|
||||||
|
headline treatment of the home draft. `.sh-wipe` reads the very step
|
||||||
|
classes `rise` sets, so both share one stagger. */
|
||||||
|
const wipe = (step?: 2 | 3 | 4 | 5) =>
|
||||||
|
reveal ? cx("sh-wipe", step && `sh-rise--${step}`) : undefined;
|
||||||
|
|
||||||
const washes = ambient ?? [];
|
const washes = ambient ?? [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -452,12 +458,27 @@ export function PageHero({
|
|||||||
{leadWithActions ? (
|
{leadWithActions ? (
|
||||||
<>
|
<>
|
||||||
{/* Headline across the top ... */}
|
{/* Headline across the top ... */}
|
||||||
<div className={cx("flex max-w-[43.75rem] flex-col gap-sm", rise(3))}>
|
<div className="flex max-w-[43.75rem] flex-col gap-sm">
|
||||||
{eyebrow ? (
|
{eyebrow ? (
|
||||||
<p className="label-md uppercase text-[var(--text-accent)]">{eyebrow}</p>
|
<p
|
||||||
|
className={cx(
|
||||||
|
"label-md uppercase text-[var(--text-accent)]",
|
||||||
|
rise(3),
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{eyebrow}
|
||||||
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<h1 className="heading-h1 text-[var(--text-primary)] md:display-sm">
|
{/* The wipe is on the heading itself, not on the column, so the
|
||||||
|
eyebrow above it still arrives with the rest of the cascade
|
||||||
|
rather than being uncovered along with the words. */}
|
||||||
|
<h1
|
||||||
|
className={cx(
|
||||||
|
"heading-h1 text-[var(--text-primary)] md:display-sm",
|
||||||
|
wipe(3),
|
||||||
|
)}
|
||||||
|
>
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
@@ -539,13 +560,18 @@ export function PageHero({
|
|||||||
mint tint over a shade, both painted on the photograph. */
|
mint tint over a shade, both painted on the photograph. */
|
||||||
<div className={cx("w-full", rise(5))}>
|
<div className={cx("w-full", rise(5))}>
|
||||||
<div className="relative w-full overflow-hidden">
|
<div className="relative w-full overflow-hidden">
|
||||||
|
{/* `sh-pan` drifts the picture inside the band as the page
|
||||||
|
scrolls past it. It is scaled up inside the frame first,
|
||||||
|
so the drift never uncovers an edge; the washes above are
|
||||||
|
positioned against the frame, not the picture, so they do
|
||||||
|
not travel with it. */}
|
||||||
<img
|
<img
|
||||||
src={media.src}
|
src={media.src}
|
||||||
alt={media.alt}
|
alt={media.alt}
|
||||||
{...(media.width ? { width: media.width } : {})}
|
{...(media.width ? { width: media.width } : {})}
|
||||||
{...(media.height ? { height: media.height } : {})}
|
{...(media.height ? { height: media.height } : {})}
|
||||||
fetchPriority="high"
|
fetchPriority="high"
|
||||||
className="aspect-[16/9] w-full object-cover md:aspect-[1244/415]"
|
className="sh-pan aspect-[16/9] w-full object-cover md:aspect-[1244/415]"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
@@ -747,39 +773,3 @@ export function ValueChips({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface StatStripProps {
|
|
||||||
stats: readonly { value: string; label: string }[];
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The figures band. `value` is authored in the CMS as a string, already
|
|
||||||
* formatted for its locale, because the site must never invent or re-derive a
|
|
||||||
* project figure - see the note the pages render when this list is empty.
|
|
||||||
*/
|
|
||||||
export function StatStrip({ stats, className }: StatStripProps) {
|
|
||||||
if (stats.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<dl
|
|
||||||
className={cx(
|
|
||||||
"grid grid-cols-2 gap-lg border-y border-[var(--border-subtle)] py-xl md:grid-cols-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{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 text-start"
|
|
||||||
>
|
|
||||||
<dt className="body-sm text-[var(--text-secondary)]">{stat.label}</dt>
|
|
||||||
<dd className="heading-h1 text-[var(--text-accent)]">{stat.value}</dd>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</dl>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
+165
-173
@@ -1,15 +1,18 @@
|
|||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
HOME - /en and /ar
|
HOME - /en and /ar
|
||||||
----------------------------------------------------------------------------
|
----------------------------------------------------------------------------
|
||||||
The redesigned home page (Claude Design "Home", second drop), carried onto
|
The redesigned home page (Claude Design "Home page redesign with news and
|
||||||
the project's own design system. Six bands, alternating the two dark
|
FAQs", third drop), carried onto the project's own design system. Six bands,
|
||||||
surfaces the way the draft alternates #0B0B0A and #1D1D1B:
|
alternating the two dark surfaces the way the draft alternates #0B0B0A and
|
||||||
|
#1D1D1B:
|
||||||
|
|
||||||
Hero EU badge, an optional status pill, the headline, the lead,
|
Hero EU badge, an optional status pill, the headline, the lead,
|
||||||
the CTA pair, the wide picture, the brand stripe and the
|
the CTA pair, the wide picture and the brand stripe. Two
|
||||||
figures row. Two slow washes drift behind it.
|
slow washes drift behind it.
|
||||||
Launch "An important start for the project": the launch lead and
|
Approach "A nationwide project, delivered locally": what the project
|
||||||
three pictures from the CMS gallery.
|
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
|
Work "Three areas of change" - the three approved pillars, with
|
||||||
a link through to What We Do.
|
a link through to What We Do.
|
||||||
Newsroom three cards from the newsroom, newest first.
|
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
|
* The draft's FAQ column promises a reply "within five working days". That
|
||||||
commitment appears in no approved document, so it is not published
|
commitment appears in no approved document, so it is not published
|
||||||
(CLAUDE.md rule 5). Everything else in the draft is verifiable: the four
|
(CLAUDE.md rule 5). Everything else in the draft is verifiable against
|
||||||
figures, the ministries at the launch and the three pillars are all in
|
docs/ or the bundled draft copy.
|
||||||
docs/ or in the bundled draft copy.
|
* The figures band the second drop carried is gone, as it is from the third
|
||||||
* Every list - news, questions, partner logos, launch pictures - is CMS
|
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
|
data, never the draft's sample entries. Each band shows its localised
|
||||||
empty state instead of inventing content.
|
empty state instead of inventing content.
|
||||||
* The draft's own navigation and footer are ignored: the site ships
|
* The draft's own navigation and footer are ignored: the site ships
|
||||||
<Navigation /> and <Footer /> from the app shell.
|
<Navigation /> and <Footer /> from the app shell.
|
||||||
|
|
||||||
MOTION: every animation in the draft is here, as classes from
|
MOTION: every animation in the draft is here, as classes from
|
||||||
_page-kit/motion.css, plus the figures counting up on arrival. The one
|
_page-kit/motion.css - the headline wipe, the hero picture's scroll-driven
|
||||||
effect deliberately dropped is the coloured glow behind a hovered button or
|
drift, the gallery and card hovers, the logo marquee. The one effect
|
||||||
card.
|
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
|
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-).
|
is why every inline edge below is logical (ps-/pe-/start-/end-).
|
||||||
========================================================================= */
|
========================================================================= */
|
||||||
|
|
||||||
import { useEffect, useLayoutEffect, useState } from "react";
|
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router";
|
||||||
|
|
||||||
import { ArrowIcon, Button } from "~/components/ui/Button";
|
import { ArrowIcon, Button } from "~/components/ui/Button";
|
||||||
@@ -74,6 +78,7 @@ import {
|
|||||||
toImage,
|
toImage,
|
||||||
toPartner,
|
toPartner,
|
||||||
type ResolvedImage,
|
type ResolvedImage,
|
||||||
|
type ResolvedPartner,
|
||||||
} from "./_page-kit/cms.server";
|
} from "./_page-kit/cms.server";
|
||||||
import { pageCopy } from "./_page-kit/copy";
|
import { pageCopy } from "./_page-kit/copy";
|
||||||
import { routeLocale } from "./_page-kit/locale";
|
import { routeLocale } from "./_page-kit/locale";
|
||||||
@@ -90,12 +95,21 @@ import "./_page-kit/motion.css";
|
|||||||
|
|
||||||
/** The network logo wall - a wide but finite grid. */
|
/** The network logo wall - a wide but finite grid. */
|
||||||
const PARTNER_PAGE_SIZE = 36;
|
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. */
|
/** The draft's newsroom band is a straight three-up row. */
|
||||||
const NEWS_PAGE_SIZE = 3;
|
const NEWS_PAGE_SIZE = 3;
|
||||||
/** More than a dozen questions is a page of its own, not a home page band. */
|
/** More than a dozen questions is a page of its own, not a home page band. */
|
||||||
const FAQ_PAGE_SIZE = 12;
|
const FAQ_PAGE_SIZE = 12;
|
||||||
/** The draft's launch band shows three pictures. */
|
/** The draft's approach band shows three pictures. */
|
||||||
const LAUNCH_SHOTS = 3;
|
const GALLERY_SHOTS = 3;
|
||||||
|
|
||||||
/** A newsroom card, already localised and safe to serialise to the client. */
|
/** A newsroom card, already localised and safe to serialise to the client. */
|
||||||
interface NewsCard {
|
interface NewsCard {
|
||||||
@@ -131,7 +145,7 @@ export async function loader({ params }: Route.LoaderArgs) {
|
|||||||
locale,
|
locale,
|
||||||
populate: {
|
populate: {
|
||||||
hero: { populate: { media: true, ctas: true } },
|
hero: { populate: { media: true, ctas: true } },
|
||||||
stats: true,
|
approach: { populate: { images: true } },
|
||||||
// Strapi 5 populates a dynamic zone per component with `on`.
|
// Strapi 5 populates a dynamic zone per component with `on`.
|
||||||
blocks: { on: { "blocks.image-gallery": { populate: { images: true } } } },
|
blocks: { on: { "blocks.image-gallery": { populate: { images: true } } } },
|
||||||
featuredNews: { populate: { coverImage: true, authorOrganisation: true } },
|
featuredNews: { populate: { coverImage: true, authorOrganisation: true } },
|
||||||
@@ -174,9 +188,15 @@ export async function loader({ params }: Route.LoaderArgs) {
|
|||||||
pagination: { pageSize: FAQ_PAGE_SIZE },
|
pagination: { pageSize: FAQ_PAGE_SIZE },
|
||||||
});
|
});
|
||||||
|
|
||||||
const gallery = list(page?.blocks)
|
/* 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)
|
.filter(isImageGalleryBlock)
|
||||||
.flatMap((block) => list(block.images))
|
.flatMap((block) => list(block.images)),
|
||||||
|
]
|
||||||
.map((image) => toImage(image, "medium"))
|
.map((image) => toImage(image, "medium"))
|
||||||
.filter((image): image is ResolvedImage => image !== undefined);
|
.filter((image): image is ResolvedImage => image !== undefined);
|
||||||
|
|
||||||
@@ -193,12 +213,12 @@ export async function loader({ params }: Route.LoaderArgs) {
|
|||||||
variant: cta.variant ?? "primary",
|
variant: cta.variant ?? "primary",
|
||||||
})),
|
})),
|
||||||
},
|
},
|
||||||
/* Editor-owned figures win; the bundled four stand in until then. */
|
approach: {
|
||||||
stats: list(page?.stats).map((stat) => ({
|
eyebrow: page?.approach?.eyebrow ?? null,
|
||||||
value: stat.value,
|
heading: page?.approach?.heading ?? null,
|
||||||
label: stat.label,
|
lead: page?.approach?.lead ?? null,
|
||||||
})),
|
},
|
||||||
gallery: gallery.slice(0, LAUNCH_SHOTS),
|
gallery: gallery.slice(0, GALLERY_SHOTS),
|
||||||
partnersHeadline: page?.partnersHeadline ?? null,
|
partnersHeadline: page?.partnersHeadline ?? null,
|
||||||
partners: partners.map(toPartner),
|
partners: partners.map(toPartner),
|
||||||
news: news.slice(0, NEWS_PAGE_SIZE).map((article) => toNewsCard(article, locale)),
|
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 approach band's three pictures. The CMS alt text doubles as the visible
|
||||||
*
|
|
||||||
* 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
|
|
||||||
* caption - so the picture is described once, in the caption, and the <img>
|
* 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
|
* itself is marked decorative rather than having a screen reader read the same
|
||||||
* sentence twice.
|
* 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;
|
if (images.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -385,12 +329,14 @@ function LaunchShots({ images }: { images: readonly ResolvedImage[] }) {
|
|||||||
{images.map((image) => (
|
{images.map((image) => (
|
||||||
<li key={image.src} className="sh-reveal">
|
<li key={image.src} className="sh-reveal">
|
||||||
<figure className="flex flex-col gap-xs">
|
<figure className="flex flex-col gap-xs">
|
||||||
|
<div className="sh-lift sh-zoom rounded-control border border-[var(--border-subtle)] hover:border-[var(--border-accent)]">
|
||||||
<img
|
<img
|
||||||
src={image.src}
|
src={image.src}
|
||||||
alt=""
|
alt=""
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
className="sh-lift h-[15rem] w-full rounded-control border border-[var(--border-subtle)] object-cover hover:border-[var(--border-accent)]"
|
className="h-[15rem] w-full object-cover"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{image.alt ? (
|
{image.alt ? (
|
||||||
<figcaption className="body-sm-bold text-[var(--text-secondary)]">
|
<figcaption className="body-sm-bold text-[var(--text-secondary)]">
|
||||||
{image.alt}
|
{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. */
|
/** The "see the whole section" link the draft puts opposite a band heading. */
|
||||||
function BandLink({ to, label }: { to: string; label: string }) {
|
function BandLink({ to, label }: { to: string; label: string }) {
|
||||||
return (
|
return (
|
||||||
@@ -417,7 +431,7 @@ function BandLink({ to, label }: { to: string; label: string }) {
|
|||||||
------------------------------------------------------------------------ */
|
------------------------------------------------------------------------ */
|
||||||
|
|
||||||
export default function Home({ loaderData }: Route.ComponentProps) {
|
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 t = createTranslator(locale);
|
||||||
const copy = pageCopy(locale).home;
|
const copy = pageCopy(locale).home;
|
||||||
/* The three pillars are the About page's approved copy - one source, so the
|
/* 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 headline = hero.headline ?? copy.heroHeadline;
|
||||||
const lead = hero.subheading ?? copy.heroLead;
|
const lead = hero.subheading ?? copy.heroLead;
|
||||||
const figures = stats.length > 0 ? stats : copy.stats;
|
|
||||||
const consortiumHeading = loaderData.partnersHeadline ?? copy.consortiumHeading;
|
const consortiumHeading = loaderData.partnersHeadline ?? copy.consortiumHeading;
|
||||||
|
|
||||||
/* The frame draws one accent CTA and one white one. Editor-supplied CTAs go
|
/* 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
|
<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}
|
title={headline}
|
||||||
lead={lead}
|
lead={lead}
|
||||||
leadWithActions
|
leadWithActions
|
||||||
@@ -500,28 +513,29 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
|||||||
actions={heroCtas.map((cta) => (
|
actions={heroCtas.map((cta) => (
|
||||||
<HeroCta key={`${cta.href}-${cta.label}`} {...cta} />
|
<HeroCta key={`${cta.href}-${cta.label}`} {...cta} />
|
||||||
))}
|
))}
|
||||||
below={<StatsRow stats={figures} />}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* THE LAUNCH */}
|
{/* WHAT THE PROJECT IS, AND WHO DELIVERS IT */}
|
||||||
<PageSection
|
<PageSection
|
||||||
aria-labelledby="home-launch-heading"
|
aria-labelledby="home-approach-heading"
|
||||||
band
|
band
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-3xl">
|
<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">
|
<div className="sh-reveal mx-auto flex max-w-[55rem] flex-col items-center gap-lg text-center">
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
id="home-launch-heading"
|
id="home-approach-heading"
|
||||||
eyebrow={copy.launchEyebrow}
|
eyebrow={approach.eyebrow ?? copy.approachEyebrow}
|
||||||
title={copy.launchHeading}
|
title={approach.heading ?? copy.approachHeading}
|
||||||
size="display"
|
size="display"
|
||||||
align="center"
|
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>
|
</div>
|
||||||
|
|
||||||
<LaunchShots images={gallery} />
|
<GalleryShots images={gallery} />
|
||||||
</div>
|
</div>
|
||||||
</PageSection>
|
</PageSection>
|
||||||
|
|
||||||
@@ -545,7 +559,9 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
|||||||
{pillars.map((pillar) => (
|
{pillars.map((pillar) => (
|
||||||
<li
|
<li
|
||||||
key={pillar.title}
|
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>
|
<h3 className="heading-h3 text-[var(--text-primary)]">{pillar.title}</h3>
|
||||||
<p className="body-md text-[var(--text-secondary)]">
|
<p className="body-md text-[var(--text-secondary)]">
|
||||||
@@ -680,59 +696,35 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
|||||||
{copy.networkLabel}
|
{copy.networkLabel}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
{partners.length > 0 ? (
|
{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>
|
|
||||||
) : (
|
|
||||||
<EmptyState message={copy.partnersEmpty} />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
@@ -11,6 +11,7 @@
|
|||||||
"dev": "pnpm -r --parallel --stream dev",
|
"dev": "pnpm -r --parallel --stream dev",
|
||||||
"dev:web": "pnpm --filter web dev",
|
"dev:web": "pnpm --filter web dev",
|
||||||
"dev:cms": "pnpm --filter cms develop",
|
"dev:cms": "pnpm --filter cms develop",
|
||||||
|
"seed": "pnpm --filter cms seed",
|
||||||
"build": "pnpm --filter cms build && pnpm --filter web build",
|
"build": "pnpm --filter cms build && pnpm --filter web build",
|
||||||
"start": "pnpm -r --parallel --stream start",
|
"start": "pnpm -r --parallel --stream start",
|
||||||
"typecheck": "pnpm -r --stream typecheck"
|
"typecheck": "pnpm -r --stream typecheck"
|
||||||
|
|||||||
Reference in New Issue
Block a user