Rebuild the site to the Claude Design drafts
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -227,3 +227,197 @@ export const NEWS_DETAIL_COPY: Localised<Pick<DetailCopy, "backToListing" | "abo
|
||||
aboutThis: "عن هذا المستجد",
|
||||
},
|
||||
};
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
LISTING CHROME - the redesign's page furniture
|
||||
----------------------------------------------------------------------------
|
||||
The strings the six listing pages gained with the 2026 redesign drafts:
|
||||
hero eyebrows, the pill and facet labels, the calendar's view switch, the
|
||||
knowledge hub's FAQ band and its repository callout.
|
||||
|
||||
EVERYTHING HERE IS FURNITURE, NOT CONTENT. Not one figure, date, name or
|
||||
commitment from the drafts is carried over: the drafts' sample entries,
|
||||
their "12 modules", their "Closes 15 August 2026", their "within four
|
||||
weeks" and their TBD counters are all absent by design (CLAUDE.md rule 5).
|
||||
The two places where a draft's sentence IS reproduced are traceable to an
|
||||
approved source and noted inline.
|
||||
|
||||
`ListingChrome` is derived from the English object, so a key added on one
|
||||
side and forgotten on the other is a compile error, not a blank label.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
const LISTING_CHROME_EN = {
|
||||
news: {
|
||||
/** Draft eyebrow over the §5 headline. */
|
||||
eyebrow: "Newsroom",
|
||||
/** The draft's lead card reads "Read the full update". */
|
||||
readFull: "Read the full update",
|
||||
/** Visually hidden heading over the lead article. */
|
||||
featuredLabel: "Latest update",
|
||||
/** Visually hidden heading over the rest of the grid. */
|
||||
moreLabel: "More updates",
|
||||
},
|
||||
events: {
|
||||
eyebrow: "Events calendar",
|
||||
/** Label of the list / month switch. */
|
||||
viewLabel: "View",
|
||||
viewList: "List",
|
||||
viewMonth: "Month",
|
||||
/** Accessible name of the month grid. */
|
||||
calendarLabel: "Events by month",
|
||||
previousMonth: "Previous month",
|
||||
nextMonth: "Next month",
|
||||
monthEmpty: "No events are scheduled in this month.",
|
||||
/** Announced before the day number of a cell that carries events. */
|
||||
dayLabel: "Events on {date}",
|
||||
},
|
||||
applications: {
|
||||
eyebrow: "Applications and opportunities",
|
||||
/**
|
||||
* The draft's three-step application form IS built (see
|
||||
* ../applications-and-opportunities.tsx), but its attachment limit, its
|
||||
* reference number and its "within four weeks" are not: none of the three
|
||||
* is true of this project, so the page states none of them. The wording
|
||||
* that replaced them lives in ../_events-opportunities/copy.ts under
|
||||
* `apply`, annotated key by key.
|
||||
*/
|
||||
pathwayAllLabel: "Ways to take part",
|
||||
},
|
||||
resources: {
|
||||
eyebrow: "Resources and publications",
|
||||
/** Accessible name of the filter sidebar. */
|
||||
facetsLabel: "Refine these results",
|
||||
searchPlaceholder: "Title, author, keyword",
|
||||
/** `resource.resourceLanguage`, spelled out for the card's language chip. */
|
||||
languageEn: "English",
|
||||
languageAr: "Arabic",
|
||||
languageBilingual: "English and Arabic",
|
||||
},
|
||||
knowledge: {
|
||||
eyebrow: "Knowledge hub",
|
||||
searchPlaceholder: "Search the hub — topic, module, or keyword",
|
||||
/**
|
||||
* The count under a type card. The number always comes from Strapi, and
|
||||
* the line is dropped entirely at zero rather than reading "0 published".
|
||||
*/
|
||||
itemCount: "{count} published",
|
||||
browseLabel: "Browse by type",
|
||||
faqEyebrow: "Plain-language basics",
|
||||
faqHeading: "Frequently asked questions",
|
||||
/** Expanded from the approved §7 line for the FAQ entry of the hub. */
|
||||
faqIntro:
|
||||
"Plain-language answers on rule of law, governance, and civic participation basics.",
|
||||
faqEmpty: "Answers are being prepared and will appear here.",
|
||||
repositoryEyebrow: "Long-term repository",
|
||||
/**
|
||||
* ToR §2 and §3.3: the site "acts as a long-term repository for knowledge
|
||||
* and resource sharing linked to SHARP-ER activities and outputs" "with
|
||||
* version control, DOI/handle readiness, and searchable metadata". The
|
||||
* draft's stronger claim - that every item already is versioned and kept
|
||||
* beyond the project's end - is not made here.
|
||||
*/
|
||||
repositoryHeadline:
|
||||
"A long-term repository for knowledge and resources linked to SHARP-ER activities and outputs, with version control and searchable metadata.",
|
||||
repositoryAction: "Browse publications",
|
||||
},
|
||||
activities: {
|
||||
partnerFilterLabel: "Filter by partner",
|
||||
allPartners: "All partners",
|
||||
/** Visually hidden heading over the two onward cards. */
|
||||
nextStepsLabel: "Where to go next",
|
||||
nextEventsEyebrow: "Next",
|
||||
nextApplicationsEyebrow: "Get involved",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type ListingChrome = {
|
||||
readonly [Section in keyof typeof LISTING_CHROME_EN]: {
|
||||
readonly [Key in keyof (typeof LISTING_CHROME_EN)[Section]]: string;
|
||||
};
|
||||
};
|
||||
|
||||
const LISTING_CHROME_AR: ListingChrome = {
|
||||
news: {
|
||||
eyebrow: "غرفة الأخبار",
|
||||
readFull: "اقرأ المستجد كاملًا",
|
||||
featuredLabel: "أحدث مستجد",
|
||||
moreLabel: "مستجدات أخرى",
|
||||
},
|
||||
events: {
|
||||
eyebrow: "التقويم الزمني للفعاليات",
|
||||
viewLabel: "طريقة العرض",
|
||||
viewList: "قائمة",
|
||||
viewMonth: "شهر",
|
||||
calendarLabel: "الفعاليات حسب الشهر",
|
||||
previousMonth: "الشهر السابق",
|
||||
nextMonth: "الشهر التالي",
|
||||
monthEmpty: "لا توجد فعاليات مجدولة في هذا الشهر.",
|
||||
dayLabel: "فعاليات يوم {date}",
|
||||
},
|
||||
applications: {
|
||||
eyebrow: "طلبات وفرص المشاركة",
|
||||
pathwayAllLabel: "طرق المشاركة",
|
||||
},
|
||||
resources: {
|
||||
eyebrow: "الموارد والمنشورات",
|
||||
facetsLabel: "تصفية النتائج",
|
||||
searchPlaceholder: "العنوان أو الكاتب أو كلمة مفتاحية",
|
||||
languageEn: "الإنجليزية",
|
||||
languageAr: "العربية",
|
||||
languageBilingual: "الإنجليزية والعربية",
|
||||
},
|
||||
knowledge: {
|
||||
eyebrow: "مركز المعرفة",
|
||||
searchPlaceholder: "ابحث في المركز: موضوع أو وحدة أو كلمة مفتاحية",
|
||||
itemCount: "عدد المواد: {count}",
|
||||
browseLabel: "التصفح حسب النوع",
|
||||
faqEyebrow: "أساسيات بلغة مبسّطة",
|
||||
faqHeading: "الأسئلة الشائعة",
|
||||
faqIntro:
|
||||
"إجابات بلغة مبسّطة حول أساسيات سيادة القانون والحوكمة والمشاركة المدنية.",
|
||||
faqEmpty: "يجري إعداد الإجابات وستظهر هنا.",
|
||||
repositoryEyebrow: "مستودع طويل الأمد",
|
||||
repositoryHeadline:
|
||||
"مستودع طويل الأمد للمعرفة والموارد المرتبطة بأنشطة SHARP-ER ومخرجاته، مع ضبط الإصدارات وبيانات وصفية قابلة للبحث.",
|
||||
repositoryAction: "تصفّح المنشورات",
|
||||
},
|
||||
activities: {
|
||||
partnerFilterLabel: "التصفية حسب الشريك",
|
||||
allPartners: "جميع الشركاء",
|
||||
nextStepsLabel: "إلى أين بعد ذلك",
|
||||
nextEventsEyebrow: "التالي",
|
||||
nextApplicationsEyebrow: "شارك معنا",
|
||||
},
|
||||
};
|
||||
|
||||
const LISTING_CHROME: Localised<ListingChrome> = {
|
||||
en: LISTING_CHROME_EN,
|
||||
ar: LISTING_CHROME_AR,
|
||||
};
|
||||
|
||||
/** The listing chrome for a locale. Never returns "". */
|
||||
export function getListingChrome(locale: Locale): ListingChrome {
|
||||
return LISTING_CHROME[locale] ?? LISTING_CHROME_EN;
|
||||
}
|
||||
|
||||
/**
|
||||
* `resource.resourceLanguage` spelled out. Returns undefined for a value the
|
||||
* enumeration does not carry, so the chip is dropped rather than invented.
|
||||
*/
|
||||
export function resourceLanguageLabel(
|
||||
value: string | null | undefined,
|
||||
locale: Locale,
|
||||
): string | undefined {
|
||||
const copy = getListingChrome(locale).resources;
|
||||
|
||||
switch (value) {
|
||||
case "en":
|
||||
return copy.languageEn;
|
||||
case "ar":
|
||||
return copy.languageAr;
|
||||
case "bilingual":
|
||||
return copy.languageBilingual;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user