# Ombrora Hub Landing Page Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build a static, SEO-optimized Astro landing page at `www.ombrora.com` that acts as a bilingual (FR/EN) hub linking out to Ombrora's CVE Watch and Convert services. **Architecture:** A single Astro page rendered twice via Astro's built-in i18n routing (`/en/`, `/fr/`), composed from small shared components (BaseLayout, Header, Hero content inline, ServiceCard, Footer) driven by plain TypeScript dictionaries and a service data file. No client framework, no server runtime — everything is prerendered HTML/CSS with a small amount of vanilla JS for theme switching. **Tech Stack:** Astro 7.x (static output, the default), TypeScript, Vitest for tests, `@astrojs/sitemap` for sitemap generation, plain CSS (custom properties for theming). Deployed as static files to o2switch shared hosting. ## Global Constraints - Static output only — no SSR, no adapter (`output: 'static'`, Astro's default; never add an adapter). - i18n routing is path-based and symmetric: `/en/` and `/fr/`, via `routing: { prefixDefaultLocale: true }` — there is no unprefixed default-locale route. - The bare root `/` is handled entirely by `public/.htaccess` (Apache `mod_rewrite`, `Accept-Language`-based), not by Astro routing or client-side JS. - Deploy target is o2switch shared hosting: the contents of `dist/` are uploaded as-is (including `.htaccess`). - Light and dark themes are both required. Default follows `prefers-color-scheme`; a manual toggle persists to `localStorage` under the exact key `ombrora-theme` with values `"dark"` or `"light"`. Theme is applied via a `data-theme` attribute on ``, driven by CSS custom properties. - Scope is minimal: one hub page in two locales, two services (CVE Watch, Convert), a footer. No About/Contact/legal pages, no analytics. - Package manager is npm. - Every page needs: canonical link, `hreflang` alternates (en, fr, x-default), meta description, Open Graph tags, and must be covered by the sitemap. --- ### Task 1: Scaffold Astro project with i18n routing **Files:** - Create (via CLI, then moved into repo root): `package.json`, `astro.config.mjs`, `tsconfig.json`, `.gitignore`, `src/pages/en/index.astro`, `src/pages/fr/index.astro` - Delete: `src/pages/index.astro` (default template page — this project has no unprefixed route) - Test: `tests/routing.test.ts` **Interfaces:** - Consumes: nothing (first task). - Produces: a working `npm run build` that outputs `dist/en/index.html` and `dist/fr/index.html`, and no `dist/index.html`. `npm run test` runs Vitest. `astro.config.mjs` exports `site: 'https://www.ombrora.com'` and `i18n: { locales: ['en', 'fr'], defaultLocale: 'en', routing: { prefixDefaultLocale: true } }` — later tasks add to this file's `integrations` array but must not change these two settings. - [ ] **Step 1: Scaffold a fresh Astro project into a temporary directory** Run from the repo root (`C:\Users\tony1\PhpstormProjects\Ombrora-Landing`): ```bash npm create astro@latest ombrora-scaffold-tmp -- --template minimal --no-git --yes ``` This avoids any ambiguity around scaffolding into the current, non-empty directory (it already contains `CLAUDE.md`, `docs/`, `.git`, `.idea`). - [ ] **Step 2: Move the scaffolded files into the repo root** ```bash mv ombrora-scaffold-tmp/.[!.]* ombrora-scaffold-tmp/* . rmdir ombrora-scaffold-tmp ``` Verify `package.json`, `astro.config.mjs`, `tsconfig.json`, `.gitignore`, and `src/` now exist at the repo root. - [ ] **Step 3: Confirm `.gitignore` excludes build artifacts** Open `.gitignore` and confirm it contains at least: ``` node_modules/ dist/ .astro/ ``` Add any missing line. - [ ] **Step 4: Remove the default page and add locale placeholder pages** Delete `src/pages/index.astro`. Create `src/pages/en/index.astro`: ```astro --- const locale = 'en'; --- Ombrora

Ombrora — EN

``` Create `src/pages/fr/index.astro`: ```astro --- const locale = 'fr'; --- Ombrora

Ombrora — FR

``` - [ ] **Step 5: Configure `site` and `i18n` in `astro.config.mjs`** Replace its contents with: ```js import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://www.ombrora.com', i18n: { locales: ['en', 'fr'], defaultLocale: 'en', routing: { prefixDefaultLocale: true, }, }, }); ``` - [ ] **Step 6: Add Vitest** ```bash npm install -D vitest ``` In `package.json`, add to `"scripts"`: ```json "test": "vitest run" ``` - [ ] **Step 7: Write the failing test** Create `tests/routing.test.ts`: ```ts import { describe, it, expect } from 'vitest'; import { readFileSync, existsSync } from 'node:fs'; describe('locale routing', () => { it('builds /en/ and /fr/ pages with correct lang attributes', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('lang="en"'); expect(fr).toContain('lang="fr"'); }); it('does not build an unprefixed root page', () => { expect(existsSync('dist/index.html')).toBe(false); }); }); ``` - [ ] **Step 8: Run the test and confirm it fails** Run: `npm run test` Expected: FAIL — `dist/en/index.html` does not exist yet (no build has run). - [ ] **Step 9: Build the site** Run: `npm run build` - [ ] **Step 10: Run the test and confirm it passes** Run: `npm run test` Expected: PASS (2 tests). - [ ] **Step 11: Commit** ```bash git add package.json package-lock.json astro.config.mjs tsconfig.json .gitignore src tests git commit -m "feat: scaffold Astro project with en/fr i18n routing" ``` --- ### Task 2: i18n content dictionaries and service data **Files:** - Create: `src/i18n/locale.ts`, `src/i18n/en.ts`, `src/i18n/fr.ts`, `src/i18n/index.ts`, `src/i18n/services.ts` - Test: `tests/i18n.test.ts` **Interfaces:** - Consumes: nothing (standalone data module). - Produces: - `src/i18n/locale.ts`: `type Locale = 'en' | 'fr'`, `const locales: Locale[]`, `function otherLocale(locale: Locale): Locale`, `function swapLocalePath(pathname: string, from: Locale, to: Locale): string`. - `src/i18n/en.ts`: `const en = {...} as const`, `type Dictionary = typeof en`. - `src/i18n/fr.ts`: `const fr: Dictionary`. - `src/i18n/index.ts`: `function getDictionary(locale: Locale): Dictionary`. - `src/i18n/services.ts`: `interface Service { id: string; url: string | Record; name: Record; tag: Record; description: Record; }`, `const services: Service[]`, `function resolveServiceUrl(service: Service, locale: Locale): string`. - These are consumed by Tasks 3–6 (BaseLayout, Header, LanguageSwitcher, ThemeToggle, ServiceCard, Footer, pages). - [ ] **Step 1: Write the failing test** Create `tests/i18n.test.ts`: ```ts import { describe, it, expect } from 'vitest'; import { en } from '../src/i18n/en'; import { fr } from '../src/i18n/fr'; import { getDictionary } from '../src/i18n'; import { otherLocale, swapLocalePath, locales } from '../src/i18n/locale'; import { services, resolveServiceUrl } from '../src/i18n/services'; describe('i18n dictionaries', () => { it('exposes both locales', () => { expect(locales).toEqual(['en', 'fr']); }); it('fr and en dictionaries have the same keys', () => { expect(Object.keys(fr)).toEqual(Object.keys(en)); expect(Object.keys(fr.hero)).toEqual(Object.keys(en.hero)); expect(Object.keys(fr.theme)).toEqual(Object.keys(en.theme)); }); it('getDictionary resolves the right dictionary', () => { expect(getDictionary('en')).toBe(en); expect(getDictionary('fr')).toBe(fr); }); it('otherLocale flips locale', () => { expect(otherLocale('en')).toBe('fr'); expect(otherLocale('fr')).toBe('en'); }); it('swapLocalePath swaps the locale segment', () => { expect(swapLocalePath('/en/', 'en', 'fr')).toBe('/fr/'); }); }); describe('services data', () => { it('resolves a locale-specific url', () => { const cve = services.find((s) => s.id === 'cve')!; expect(resolveServiceUrl(cve, 'en')).toBe('https://cve-en.ombrora.com'); expect(resolveServiceUrl(cve, 'fr')).toBe('https://cve-fr.ombrora.com'); }); it('resolves a single-url service the same for both locales', () => { const convert = services.find((s) => s.id === 'convert')!; expect(resolveServiceUrl(convert, 'en')).toBe('https://convert.ombrora.com'); expect(resolveServiceUrl(convert, 'fr')).toBe('https://convert.ombrora.com'); }); it('has exactly two services: cve and convert', () => { expect(services.map((s) => s.id).sort()).toEqual(['convert', 'cve']); }); }); ``` - [ ] **Step 2: Run the test and confirm it fails** Run: `npm run test` Expected: FAIL — cannot find module `../src/i18n/en` (files don't exist yet). - [ ] **Step 3: Create `src/i18n/locale.ts`** ```ts export type Locale = 'en' | 'fr'; export const locales: Locale[] = ['en', 'fr']; export function otherLocale(locale: Locale): Locale { return locale === 'en' ? 'fr' : 'en'; } export function swapLocalePath(pathname: string, from: Locale, to: Locale): string { return pathname.replace(`/${from}/`, `/${to}/`); } ``` - [ ] **Step 4: Create `src/i18n/en.ts`** ```ts export const en = { meta: { title: 'Ombrora — Security tracking and file tools', description: "Ombrora is a hub for a growing set of independent tools: CVE tracking and file conversion.", }, nav: { brand: 'Ombrora', }, hero: { title: 'The Ombrora hub', subtitle: 'Small, focused tools for security tracking and everyday file conversion — this page is the map.', }, services: { heading: 'Services', }, theme: { toggleToDark: 'Switch to dark mode', toggleToLight: 'Switch to light mode', }, footer: { text: 'Ombrora', }, } as const; export type Dictionary = typeof en; ``` - [ ] **Step 5: Create `src/i18n/fr.ts`** ```ts import type { Dictionary } from './en'; export const fr: Dictionary = { meta: { title: 'Ombrora — Veille sécurité et outils de fichiers', description: 'Ombrora est un hub regroupant des outils indépendants : veille CVE et conversion de fichiers.', }, nav: { brand: 'Ombrora', }, hero: { title: 'Le hub des outils Ombrora', subtitle: 'Des outils simples et ciblés pour la veille sécurité et la conversion de fichiers au quotidien — cette page en est la carte.', }, services: { heading: 'Services', }, theme: { toggleToDark: 'Passer en mode sombre', toggleToLight: 'Passer en mode clair', }, footer: { text: 'Ombrora', }, }; ``` - [ ] **Step 6: Create `src/i18n/index.ts`** ```ts import { en } from './en'; import { fr } from './fr'; import type { Dictionary } from './en'; import type { Locale } from './locale'; const dictionaries: Record = { en, fr }; export function getDictionary(locale: Locale): Dictionary { return dictionaries[locale]; } ``` - [ ] **Step 7: Create `src/i18n/services.ts`** ```ts import type { Locale } from './locale'; export interface Service { id: string; url: string | Record; name: Record; tag: Record; description: Record; } export const services: Service[] = [ { id: 'cve', url: { en: 'https://cve-en.ombrora.com', fr: 'https://cve-fr.ombrora.com', }, name: { en: 'CVE Watch', fr: 'Veille CVE' }, tag: { en: 'Security blog', fr: 'Blog sécurité' }, description: { en: 'Daily-tracked CVE disclosures, explained.', fr: 'Les CVE publiées, suivies et expliquées au quotidien.', }, }, { id: 'convert', url: 'https://convert.ombrora.com', name: { en: 'Convert', fr: 'Convert' }, tag: { en: 'File converter', fr: 'Convertisseur de fichiers' }, description: { en: 'Convert documents, audio, images, video, and archives.', fr: 'Convertissez documents, audio, images, vidéos et archives.', }, }, ]; export function resolveServiceUrl(service: Service, locale: Locale): string { return typeof service.url === 'string' ? service.url : service.url[locale]; } ``` - [ ] **Step 8: Run the test and confirm it passes** Run: `npm run test` Expected: PASS (all tests in `tests/i18n.test.ts` and `tests/routing.test.ts`). - [ ] **Step 9: Commit** ```bash git add src/i18n tests/i18n.test.ts git commit -m "feat: add i18n dictionaries and service data" ``` --- ### Task 3: BaseLayout — SEO head tags, global theming CSS, pre-paint theme script **Files:** - Create: `src/layouts/BaseLayout.astro`, `src/styles/global.css` - Modify: `src/pages/en/index.astro`, `src/pages/fr/index.astro` (replace placeholder markup with `` usage) - Test: `tests/seo-theme.test.ts` **Interfaces:** - Consumes: `getDictionary`, `Locale`, `otherLocale`, `swapLocalePath` from Task 2. - Produces: `BaseLayout.astro` with `Props { locale: Locale }` — derives ``/description from `getDictionary(locale).meta` internally (callers only pass `locale`). Sets `<html lang>`, canonical, hreflang alternates, OG tags, links `global.css`, and includes an inline pre-paint script that reads `localStorage.getItem('ombrora-theme')` (falling back to `prefers-color-scheme`) and sets `data-theme` on `<html>`. This `data-theme` attribute and the `ombrora-theme` localStorage key are the contract Task 4's `ThemeToggle` must use. - [ ] **Step 1: Write the failing test** Create `tests/seo-theme.test.ts`: ```ts import { describe, it, expect, beforeAll } from 'vitest'; import { execSync } from 'node:child_process'; import { readFileSync } from 'node:fs'; describe('BaseLayout SEO tags and theming', () => { beforeAll(() => { execSync('npm run build', { stdio: 'inherit' }); }); it('sets canonical and hreflang alternates pointing at each other', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('rel="canonical" href="https://www.ombrora.com/en/"'); expect(en).toContain('hreflang="fr" href="https://www.ombrora.com/fr/"'); expect(fr).toContain('rel="canonical" href="https://www.ombrora.com/fr/"'); expect(fr).toContain('hreflang="en" href="https://www.ombrora.com/en/"'); }); it('uses the locale-specific meta title and description', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('<title>Ombrora — Security tracking and file tools'); expect(fr).toContain('Ombrora — Veille sécurité et outils de fichiers'); }); it('includes a pre-paint theme script keyed on ombrora-theme', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); expect(en).toContain("localStorage.getItem('ombrora-theme')"); expect(en).toContain('prefers-color-scheme: light'); }); it('links the global stylesheet', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); expect(en).toMatch(/]*href="[^"]+\.css"/); }); }); ``` Note: from this task on, tests call `npm run build` themselves via `beforeAll`, so `npm run test` alone is sufficient going forward. - [ ] **Step 2: Run the test and confirm it fails** Run: `npm run test -- tests/seo-theme.test.ts` Expected: FAIL — the built HTML doesn't contain canonical/hreflang tags or the theme script yet. - [ ] **Step 3: Create `src/styles/global.css`** ```css :root { --bg: #ffffff; --fg: #14171a; --muted: #5b6470; --accent: #6d5bff; --card-bg: #f4f5f7; --border: #e1e4e8; } :root[data-theme='dark'] { --bg: #0d0f12; --fg: #e6e8eb; --muted: #9aa3ad; --accent: #8f7cff; --card-bg: #16191d; --border: #262b31; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0d0f12; --fg: #e6e8eb; --muted: #9aa3ad; --accent: #8f7cff; --card-bg: #16191d; --border: #262b31; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5; } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); } .header-actions { display: flex; gap: 0.75rem; align-items: center; } .brand { font-weight: 700; color: var(--fg); text-decoration: none; } .language-switcher { color: var(--muted); text-decoration: none; font-size: 0.9rem; } .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; cursor: pointer; color: var(--fg); } main { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .hero { padding: 3rem 0; } .hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 0.75rem; } .hero p { color: var(--muted); max-width: 40ch; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .service-card { display: block; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); text-decoration: none; color: var(--fg); } .service-card__tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; } .service-card__name { margin: 0.4rem 0 0.35rem; } .service-card__description { color: var(--muted); margin: 0; font-size: 0.95rem; } .site-footer { padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); } ``` - [ ] **Step 4: Create `src/layouts/BaseLayout.astro`** ```astro --- import '../styles/global.css'; import { getDictionary } from '../i18n'; import { otherLocale, swapLocalePath } from '../i18n/locale'; import type { Locale } from '../i18n/locale'; interface Props { locale: Locale; } const { locale } = Astro.props; const t = getDictionary(locale); const target = otherLocale(locale); const alternatePath = swapLocalePath(Astro.url.pathname, locale, target); const canonicalURL = new URL(Astro.url.pathname, Astro.site); const alternateURL = new URL(alternatePath, Astro.site); const enURL = locale === 'en' ? canonicalURL : alternateURL; const frURL = locale === 'fr' ? canonicalURL : alternateURL; --- {t.meta.title} ``` - [ ] **Step 5: Update `src/pages/en/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; const locale = 'en'; ---

Ombrora

 ``` - [ ] **Step 6: Update `src/pages/fr/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; const locale = 'fr'; ---

Ombrora

 ``` - [ ] **Step 7: Run the test and confirm it passes** Run: `npm run test` Expected: PASS (all test files). - [ ] **Step 8: Commit** ```bash git add src/layouts src/styles src/pages tests/seo-theme.test.ts git commit -m "feat: add BaseLayout with SEO head tags and theme init script" ``` --- ### Task 4: Header — brand, language switcher, theme toggle **Files:** - Create: `src/components/Header.astro`, `src/components/LanguageSwitcher.astro`, `src/components/ThemeToggle.astro` - Modify: `src/pages/en/index.astro`, `src/pages/fr/index.astro` (render `
` inside ``) - Test: `tests/header.test.ts` **Interfaces:** - Consumes: `getDictionary`, `otherLocale`, `swapLocalePath`, `Locale` from Task 2; the `data-theme` attribute / `ombrora-theme` localStorage key contract from Task 3. - Produces: `Header.astro` `Props { locale: Locale }`, `LanguageSwitcher.astro` `Props { locale: Locale }`, `ThemeToggle.astro` `Props { locale: Locale }`. `ThemeToggle` renders a `button.theme-toggle` that flips `data-theme` and writes to `localStorage['ombrora-theme']` on click. - [ ] **Step 1: Write the failing test** Create `tests/header.test.ts`: ```ts import { describe, it, expect, beforeAll } from 'vitest'; import { execSync } from 'node:child_process'; import { readFileSync } from 'node:fs'; describe('Header, language switcher, theme toggle', () => { beforeAll(() => { execSync('npm run build', { stdio: 'inherit' }); }); it('renders the brand link on both locales', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('class="brand" href="/en/"'); expect(fr).toContain('class="brand" href="/fr/"'); }); it('language switcher on /en/ links to /fr/ and vice versa', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('class="language-switcher" href="/fr/"'); expect(fr).toContain('class="language-switcher" href="/en/"'); }); it('theme toggle button carries localized aria-labels', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); expect(en).toContain('aria-label="Switch to dark mode"'); expect(fr).toContain('aria-label="Passer en mode sombre"'); }); it('theme toggle click handler flips data-theme and persists to localStorage', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); expect(en).toContain("localStorage.setItem('ombrora-theme', next)"); }); }); ``` - [ ] **Step 2: Run the test and confirm it fails** Run: `npm run test -- tests/header.test.ts` Expected: FAIL — no header markup exists yet. - [ ] **Step 3: Create `src/components/LanguageSwitcher.astro`** ```astro --- import { otherLocale, swapLocalePath } from '../i18n/locale'; import type { Locale } from '../i18n/locale'; interface Props { locale: Locale; } const { locale } = Astro.props; const target = otherLocale(locale); const href = swapLocalePath(Astro.url.pathname, locale, target); const label = target === 'en' ? 'English' : 'Français'; --- {label} ``` - [ ] **Step 4: Create `src/components/ThemeToggle.astro`** ```astro --- import { getDictionary } from '../i18n'; import type { Locale } from '../i18n/locale'; interface Props { locale: Locale; } const { locale } = Astro.props; const t = getDictionary(locale); --- ``` - [ ] **Step 5: Create `src/components/Header.astro`** ```astro --- import LanguageSwitcher from './LanguageSwitcher.astro'; import ThemeToggle from './ThemeToggle.astro'; import { getDictionary } from '../i18n'; import type { Locale } from '../i18n/locale'; interface Props { locale: Locale; } const { locale } = Astro.props; const t = getDictionary(locale); ---
{t.nav.brand}
``` - [ ] **Step 6: Update `src/pages/en/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; import Header from '../../components/Header.astro'; const locale = 'en'; ---

Ombrora

``` - [ ] **Step 7: Update `src/pages/fr/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; import Header from '../../components/Header.astro'; const locale = 'fr'; ---

Ombrora

``` - [ ] **Step 8: Run the test and confirm it passes** Run: `npm run test` Expected: PASS (all test files). - [ ] **Step 9: Commit** ```bash git add src/components src/pages tests/header.test.ts git commit -m "feat: add Header with language switcher and theme toggle" ``` --- ### Task 5: Hero and service cards — full page body **Files:** - Create: `src/components/ServiceCard.astro` - Modify: `src/pages/en/index.astro`, `src/pages/fr/index.astro` - Test: `tests/services.test.ts` **Interfaces:** - Consumes: `getDictionary`, `services`, `resolveServiceUrl` from Task 2; `Header` from Task 4. - Produces: `ServiceCard.astro` `Props { service: Service; locale: Locale }`. Pages render the hero copy and a `services-grid` of `ServiceCard` per entry in `services`. - [ ] **Step 1: Write the failing test** Create `tests/services.test.ts`: ```ts import { describe, it, expect, beforeAll } from 'vitest'; import { execSync } from 'node:child_process'; import { readFileSync } from 'node:fs'; describe('hero and service cards', () => { let en: string; let fr: string; beforeAll(() => { execSync('npm run build', { stdio: 'inherit' }); en = readFileSync('dist/en/index.html', 'utf-8'); fr = readFileSync('dist/fr/index.html', 'utf-8'); }); it('renders the localized hero copy', () => { expect(en).toContain('The Ombrora hub'); expect(fr).toContain('Le hub des outils Ombrora'); }); it('renders the CVE Watch card with a locale-specific link', () => { expect(en).toContain('href="https://cve-en.ombrora.com"'); expect(fr).toContain('href="https://cve-fr.ombrora.com"'); expect(en).toContain('CVE Watch'); expect(fr).toContain('Veille CVE'); }); it('renders the Convert card with the same link on both locales', () => { const enMatches = en.match(/href="https:\/\/convert\.ombrora\.com"/g) ?? []; const frMatches = fr.match(/href="https:\/\/convert\.ombrora\.com"/g) ?? []; expect(enMatches.length).toBeGreaterThan(0); expect(frMatches.length).toBeGreaterThan(0); }); }); ``` - [ ] **Step 2: Run the test and confirm it fails** Run: `npm run test -- tests/services.test.ts` Expected: FAIL — hero/service markup doesn't exist yet. - [ ] **Step 3: Create `src/components/ServiceCard.astro`** ```astro --- import { resolveServiceUrl } from '../i18n/services'; import type { Service } from '../i18n/services'; import type { Locale } from '../i18n/locale'; interface Props { service: Service; locale: Locale; } const { service, locale } = Astro.props; const url = resolveServiceUrl(service, locale); --- {service.tag[locale]}

{service.name[locale]}

{service.description[locale]}

 ``` - [ ] **Step 4: Update `src/pages/en/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; import Header from '../../components/Header.astro'; import ServiceCard from '../../components/ServiceCard.astro'; import { getDictionary } from '../../i18n'; import { services } from '../../i18n/services'; const locale = 'en'; const t = getDictionary(locale); ---

{t.hero.title}

{t.hero.subtitle}

{t.services.heading}

{services.map((service) => )}
``` - [ ] **Step 5: Update `src/pages/fr/index.astro`** ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; import Header from '../../components/Header.astro'; import ServiceCard from '../../components/ServiceCard.astro'; import { getDictionary } from '../../i18n'; import { services } from '../../i18n/services'; const locale = 'fr'; const t = getDictionary(locale); ---

{t.hero.title}

{t.hero.subtitle}

{t.services.heading}

{services.map((service) => )}
``` - [ ] **Step 6: Run the test and confirm it passes** Run: `npm run test` Expected: PASS (all test files). - [ ] **Step 7: Commit** ```bash git add src/components/ServiceCard.astro src/pages tests/services.test.ts git commit -m "feat: add hero section and service cards to the hub page" ``` --- ### Task 6: Footer **Files:** - Create: `src/components/Footer.astro` - Modify: `src/pages/en/index.astro`, `src/pages/fr/index.astro` - Test: `tests/footer.test.ts` **Interfaces:** - Consumes: `getDictionary`, `Locale` from Task 2. - Produces: `Footer.astro` `Props { locale: Locale }`, rendered as the last child inside `` on both pages. - [ ] **Step 1: Write the failing test** Create `tests/footer.test.ts`: ```ts import { describe, it, expect, beforeAll } from 'vitest'; import { execSync } from 'node:child_process'; import { readFileSync } from 'node:fs'; describe('footer', () => { beforeAll(() => { execSync('npm run build', { stdio: 'inherit' }); }); it('renders the current year and brand name on both locales', () => { const en = readFileSync('dist/en/index.html', 'utf-8'); const fr = readFileSync('dist/fr/index.html', 'utf-8'); const yearPattern = /©\s*\d{4}\s*Ombrora/; expect(en).toMatch(yearPattern); expect(fr).toMatch(yearPattern); }); }); ``` - [ ] **Step 2: Run the test and confirm it fails** Run: `npm run test -- tests/footer.test.ts` Expected: FAIL — no footer markup exists yet. - [ ] **Step 3: Create `src/components/Footer.astro`** ```astro --- import { getDictionary } from '../i18n'; import type { Locale } from '../i18n/locale'; interface Props { locale: Locale; } const { locale } = Astro.props; const t = getDictionary(locale); const year = new Date().getFullYear(); ---

© {year} {t.footer.text}

``` - [ ] **Step 4: Update `src/pages/en/index.astro`** (add `Footer` import and render it after ``) ```astro --- import BaseLayout from '../../layouts/BaseLayout.astro'; import Header from '../../components/Header.astro'; import Footer from '../../components/Footer.astro'; import ServiceCard from '../../components/ServiceCard.astro'; import { getDictionary } from '../../i18n'; import { services } from '../../i18n/services'; const locale = 'en'; const t = getDictionary(locale); ---

{t.hero.title}

{t.hero.subtitle}

{t.services.heading}

{services.map((service) => )}