odoro 1.0.9 → 2.0.0

package/templates/react-ts/src/App.tsx

@@ -1,22 +1,22 @@
 /**
- * Toute la page, en un fichier.
+ * The whole page, in one file.
  *
- * ## Pourquoi tout ici
+ * ## Why everything is here
  *
- * Un projet qui demarre se lit mieux d'un seul tenant : on voit la navigation,
- * les sections et le pied de page sans ouvrir huit fichiers. Chaque bloc est
- * une fonction ; le jour ou l'un d'eux grossit, il se deplace dans son propre
- * fichier d'un couper-coller.
+ * A project that is just starting reads better in one piece: you see the
+ * navigation, the sections and the footer without opening eight files. Each
+ * block is a function; the day one of them grows, it moves into its own file
+ * with a cut and a paste.
  *
- * Deux choses vivent a part, et pour une raison : le **routeur**, qui est la
- * seule dependance de routage et se change sans toucher a la page ; et le
- * **fond**, qui est le seul morceau a dependre du moteur.
+ * Two things live apart, and for a reason: the **router**, which is the only
+ * routing dependency and can be swapped without touching the page; and the
+ * **background**, which is the only piece that depends on the engine.
  *
- * ## La barre de navigation
+ * ## The navigation bar
  *
- * Elle ne peint pas de bandeau : ce sont des gelules posees sur ce qu'il y a
- * derriere, avec un flou d'arriere-plan. Le fond decoratif continue donc de
- * passer dessous, au lieu d'etre coupe par une bande opaque.
+ * It paints no band: these are pills laid over whatever is behind, with a
+ * backdrop blur. The decorative background therefore keeps showing through,
+ * instead of being cut off by an opaque strip.
  *
  * @module
  */
@@ -31,35 +31,35 @@ import {
   type ReactNode,
 } from 'react'
 
-// Nommes plutot qu'importes en bloc : le reste du manifeste — les scripts,
-// les metadonnees — n'a rien a faire dans le code livre au navigateur.
+// Named rather than imported wholesale: the rest of the manifest — the
+// scripts, the metadata — has no business in the code shipped to the browser.
 import { dependencies, devDependencies } from '../package.json'
 
-import { Fond } from '@/fond'
-import { Link, Routeur, useLocation } from '@/router'
+import { Background } from '@/background'
+import { Link, Router, useLocation } from '@/router'
 
 /* -------------------------------------------------------------------------- */
-/*  Marque                                                                     */
+/*  Brand                                                                      */
 /* -------------------------------------------------------------------------- */
 
 /**
- * Le signe de la marque.
+ * The brand mark.
  *
- * Dessine dans le flux plutot que charge depuis `public/` : il prend la couleur
- * de son parent par `currentColor`, donc la teinte de marque en clair comme en
- * sombre, sans qu'il y ait deux fichiers a tenir.
+ * Drawn inline rather than loaded from `public/`: it takes the colour of its
+ * parent through `currentColor`, hence the brand hue in light as in dark, with
+ * no second file to maintain.
  *
- * La taille est en style et non en classe : une classe utilitaire a valeur
- * arbitraire n'est emise que si le compilateur l'a vue passer, et une classe
- * absente ne peint rien — le signe serait sans dimensions, donc invisible.
+ * The size is a style and not a class: an arbitrary-value utility class is
+ * only emitted if the compiler saw it go by, and a missing class paints
+ * nothing — the mark would have no dimensions, so it would be invisible.
  */
-function Signe({ taille = '1.75rem' }: { readonly taille?: string }): ReactElement {
+function Mark({ size = '1.75rem' }: { readonly size?: string }): ReactElement {
   return (
     <svg
       viewBox="0 0 100 100"
       fill="none"
       aria-hidden="true"
-      style={{ width: taille, height: taille, flexShrink: 0 }}
+      style={{ width: size, height: size, flexShrink: 0 }}
     >
       <path
         d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
@@ -72,61 +72,61 @@ function Signe({ taille = '1.75rem' }: { readonly taille?: string }): ReactEleme
 }
 
 /* -------------------------------------------------------------------------- */
-/*  Barre de navigation                                                        */
+/*  Navigation bar                                                             */
 /* -------------------------------------------------------------------------- */
 
 /**
- * La surface d'une gelule.
+ * The surface of a pill.
  *
- * Le systeme decline les echelles de noir et de blanc, mais pas leurs variantes
- * sombres en alpha : `o-bg-white/70` et son pendant `dark:` n'existent pas en
- * une seule classe. Le melange se fait donc en style, ou il est exact et suit
- * le theme sans qu'on ait a redire chaque couleur.
+ * The system ships the black and white scales, but not their dark alpha
+ * variants: `o-bg-white/70` and its `dark:` counterpart do not exist as a
+ * single class. So the mix is done as a style, where it is exact and follows
+ * the theme without every colour having to be restated.
  */
-const GELULE: CSSProperties = {
+const PILL: CSSProperties = {
   backgroundColor: 'color-mix(in oklab, var(--o-theme-bg) 72%, transparent)',
   borderColor: 'color-mix(in oklab, var(--o-theme-fg) 12%, transparent)',
 }
 
-/** Les entrees de la navigation. */
-const LIENS = [
-  { to: '/', label: 'Accueil' },
-  { to: '/a-propos', label: 'A propos' },
+/** The navigation entries. */
+const LINKS = [
+  { to: '/', label: 'Home' },
+  { to: '/about', label: 'About' },
 ]
 
-/** Un lien de la gelule de navigation, actif sur la route courante. */
-function LienHaut({ to, label }: { readonly to: string; readonly label: string }): ReactElement {
+/** A link in the navigation pill, active on the current route. */
+function TopLink({ to, label }: { readonly to: string; readonly label: string }): ReactElement {
   const { pathname } = useLocation()
-  const actif = pathname === to
+  const active = pathname === to
 
   return (
     <Link
       to={to}
       className={[
         'o-rounded-full o-px-4 o-py-2 o-text-sm o-no-underline o-transition-colors',
-        actif
+        active
           ? 'o-font-medium o-text-zinc-950 dark:o-text-white'
           : 'o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white',
       ].join(' ')}
-      style={actif ? GELULE : undefined}
+      style={active ? PILL : undefined}
     >
       {label}
     </Link>
   )
 }
 
-/** La barre : la marque, la navigation, et le lien vers le site. */
-function Barre(): ReactElement {
+/** The bar: the brand, the navigation, and the link to the site. */
+function Nav(): ReactElement {
   return (
     <header className="o-sticky o-top-0 o-z-20 o-px-5 md:o-px-8">
       <div className="o-mx-auto o-flex o-h-20 o-w-full o-max-w-5xl o-items-center o-gap-3">
         <Link
           to="/"
           className="o-inline-flex o-h-14 o-shrink-0 o-items-center o-gap-2.5 o-rounded-full o-border-w-1 o-pl-5 o-pr-6 o-no-underline o-backdrop-blur-xl"
-          style={GELULE}
+          style={PILL}
         >
           <span className="o-text-brand-500">
-            <Signe />
+            <Mark />
           </span>
           <span className="o-text-lg o-font-bold o-tracking-wide o-text-zinc-950 dark:o-text-white">
             ODORO
@@ -136,10 +136,10 @@ function Barre(): ReactElement {
         <nav
           aria-label="Navigation"
           className="o-inline-flex o-h-14 o-items-center o-gap-1 o-rounded-full o-border-w-1 o-px-2 o-backdrop-blur-xl"
-          style={GELULE}
+          style={PILL}
         >
-          {LIENS.map((lien) => (
-            <LienHaut key={lien.to} to={lien.to} label={lien.label} />
+          {LINKS.map((link) => (
+            <TopLink key={link.to} to={link.to} label={link.label} />
           ))}
         </nav>
 
@@ -149,11 +149,11 @@ function Barre(): ReactElement {
             target="_blank"
             rel="noreferrer"
             className="o-inline-flex o-h-14 o-shrink-0 o-items-center o-rounded-full o-border-w-1 o-px-5 o-text-sm o-no-underline o-backdrop-blur-xl o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white"
-            style={GELULE}
+            style={PILL}
           >
             odoro.dev
           </a>
-          <BasculeTheme />
+          <ThemeToggle />
         </div>
       </div>
     </header>
@@ -164,45 +164,45 @@ function Barre(): ReactElement {
 /*  Theme                                                                      */
 /* -------------------------------------------------------------------------- */
 
-/** Les trois etats de la bascule. */
-type Theme = 'systeme' | 'clair' | 'sombre'
+/** The three states of the toggle. */
+type Theme = 'system' | 'light' | 'dark'
 
-/** Ou le choix est memorise. Le script de `index.html` lit la meme cle. */
-const CLE_THEME = 'odoro-theme'
+/** Where the choice is stored. The script in `index.html` reads the same key. */
+const THEME_KEY = 'odoro-theme'
 
-/** L'ordre du cycle, au clic. */
-const CYCLE: readonly Theme[] = ['systeme', 'clair', 'sombre']
+/** The order of the cycle, on click. */
+const CYCLE: readonly Theme[] = ['system', 'light', 'dark']
 
 /**
- * Pose le theme sur la racine du document.
+ * Applies the theme to the root of the document.
  *
- * `systeme` retire l'attribut plutot que d'en poser un troisieme : la feuille
- * de style ecoute `data-theme`, et son absence rend la main a la preference du
- * navigateur. C'est ce qui permet a une page laissee en « systeme » de suivre
- * le passage en nuit sans etre rouverte.
+ * `system` removes the attribute rather than setting a third value: the
+ * stylesheet listens to `data-theme`, and its absence hands control back to
+ * the browser preference. That is what lets a page left on "system" follow the
+ * switch to night without being reopened.
  */
-function poserTheme(theme: Theme): void {
-  if (theme === 'systeme') delete document.documentElement.dataset.theme
-  else document.documentElement.dataset.theme = theme === 'clair' ? 'light' : 'dark'
+function applyTheme(theme: Theme): void {
+  if (theme === 'system') delete document.documentElement.dataset.theme
+  else document.documentElement.dataset.theme = theme
 }
 
-/** Le theme memorise, ou `systeme`. */
-function themeMemorise(): Theme {
+/** The stored theme, or `system`. */
+function storedTheme(): Theme {
   try {
-    const valeur = localStorage.getItem(CLE_THEME)
-    if (valeur === 'light') return 'clair'
-    if (valeur === 'dark') return 'sombre'
-    return 'systeme'
+    const value = localStorage.getItem(THEME_KEY)
+    if (value === 'light') return 'light'
+    if (value === 'dark') return 'dark'
+    return 'system'
   } catch {
-    // Stockage refuse — fenetre privee, cookies bloques. Le theme du systeme
-    // reste une reponse valable ; echouer ici priverait la page de son rendu.
-    return 'systeme'
+    // Storage refused — private window, cookies blocked. The system theme is
+    // still a valid answer; failing here would deprive the page of its render.
+    return 'system'
   }
 }
 
-/** Les trois pictogrammes, dessines plutot qu'importes : les icones sont optionnelles. */
-function Pictogramme({ theme }: { readonly theme: Theme }): ReactElement {
-  const commun = {
+/** The three glyphs, drawn rather than imported: the icons are optional. */
+function Glyph({ theme }: { readonly theme: Theme }): ReactElement {
+  const common = {
     viewBox: '0 0 24 24',
     fill: 'none',
     stroke: 'currentColor',
@@ -213,25 +213,25 @@ function Pictogramme({ theme }: { readonly theme: Theme }): ReactElement {
     style: { width: '1.15rem', height: '1.15rem' },
   }
 
-  if (theme === 'clair') {
+  if (theme === 'light') {
     return (
-      <svg {...commun}>
+      <svg {...common}>
         <circle cx="12" cy="12" r="4" />
         <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
       </svg>
     )
   }
 
-  if (theme === 'sombre') {
+  if (theme === 'dark') {
     return (
-      <svg {...commun}>
+      <svg {...common}>
         <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
       </svg>
     )
   }
 
   return (
-    <svg {...commun}>
+    <svg {...common}>
       <rect x="2" y="4" width="20" height="13" rx="2" />
       <path d="M8 21h8M12 17v4" />
     </svg>
@@ -239,66 +239,66 @@ function Pictogramme({ theme }: { readonly theme: Theme }): ReactElement {
 }
 
 /**
- * La bascule de theme.
+ * The theme toggle.
  *
- * Trois etats et non deux : « systeme » est un choix a part entiere, et le
- * retirer obligerait un visiteur a re-choisir a chaque changement de sa
- * preference.
+ * Three states and not two: "system" is a choice in its own right, and
+ * removing it would force a visitor to choose again every time their
+ * preference changes.
  */
-function BasculeTheme(): ReactElement {
-  const [theme, setTheme] = useState<Theme>(() => themeMemorise())
+function ThemeToggle(): ReactElement {
+  const [theme, setTheme] = useState<Theme>(() => storedTheme())
 
   useEffect(() => {
-    poserTheme(theme)
+    applyTheme(theme)
     try {
-      if (theme === 'systeme') localStorage.removeItem(CLE_THEME)
-      else localStorage.setItem(CLE_THEME, theme === 'clair' ? 'light' : 'dark')
+      if (theme === 'system') localStorage.removeItem(THEME_KEY)
+      else localStorage.setItem(THEME_KEY, theme)
     } catch {
-      // Le theme reste applique pour la session, meme sans stockage.
+      // The theme stays applied for the session, even without storage.
     }
   }, [theme])
 
   return (
     <button
       type="button"
-      aria-label={`Theme : ${theme}`}
-      title={`Theme : ${theme}`}
+      aria-label={`Theme: ${theme}`}
+      title={`Theme: ${theme}`}
       onClick={() => {
-        setTheme((actuel) => CYCLE[(CYCLE.indexOf(actuel) + 1) % CYCLE.length] ?? 'systeme')
+        setTheme((current) => CYCLE[(CYCLE.indexOf(current) + 1) % CYCLE.length] ?? 'system')
       }}
       className="o-inline-flex o-size-14 o-shrink-0 o-cursor-pointer o-items-center o-justify-center o-rounded-full o-border-w-1 o-backdrop-blur-xl o-text-zinc-600 dark:o-text-zinc-300 hover:o-text-zinc-950 dark:hover:o-text-white"
-      style={GELULE}
+      style={PILL}
     >
-      <Pictogramme theme={theme} />
+      <Glyph theme={theme} />
     </button>
   )
 }
 
 /* -------------------------------------------------------------------------- */
-/*  Sections de la page d'accueil                                              */
+/*  Home page sections                                                         */
 /* -------------------------------------------------------------------------- */
 
-/** Trois faits, pas trois slogans. */
-const FAITS = ['Zero configuration', 'Theme clair et sombre', 'Mouvement reduit respecte']
+/** Three facts, not three slogans. */
+const FACTS = ['Zero configuration', 'Light and dark themes', 'Reduced motion respected']
 
-/** Ce que la fenetre du produit montre. */
-const EXTRAIT = `export function Accueil() {
+/** What the product window shows. */
+const SNIPPET = `export function Home() {
   return (
     <Reveal>
       <h1 className="o-text-6xl o-font-bold">
-        Votre premiere page.
+        Your first page.
       </h1>
     </Reveal>
   )
 }`
 
 /**
- * Une fenetre de navigateur miniature.
+ * A miniature browser window.
  *
- * Les trois pastilles sont decoratives : elles disent « navigateur » sans rien
- * ajouter a ce qu'un lecteur d'ecran doit entendre.
+ * The three dots are decorative: they say "browser" without adding anything a
+ * screen reader needs to hear.
  */
-function Fenetre(): ReactElement {
+function Window(): ReactElement {
   return (
     <div className="o-overflow-hidden o-rounded-2xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-zinc-50 dark:o-bg-zinc-900 o-shadow-2xl">
       <div className="o-flex o-items-center o-gap-2 o-border-b o-border-zinc-200 dark:o-border-zinc-800 o-px-4 o-py-2.5">
@@ -310,39 +310,39 @@ function Fenetre(): ReactElement {
         <span className="o-ml-2 o-font-mono o-text-xs o-text-zinc-400">src/App.tsx</span>
       </div>
       <pre className="o-m-0 o-overflow-x-auto o-p-5 o-font-mono o-text-xs o-leading-relaxed o-text-zinc-600 dark:o-text-zinc-300">
-        {EXTRAIT}
+        {SNIPPET}
       </pre>
     </div>
   )
 }
 
-/** Le hero : la promesse, les actions, et la fenetre du produit. */
+/** The hero: the promise, the actions, and the product window. */
 function Hero(): ReactElement {
   return (
     <section className="o-relative o-px-6 o-pb-20 o-pt-16 md:o-pt-24">
       <div className="o-mx-auto o-w-full o-max-w-5xl">
         <Reveal>
           <span className="o-inline-flex o-items-center o-gap-2 o-whitespace-nowrap o-rounded-full o-border-w-1 o-border-brand-500/30 o-bg-brand-500/10 o-px-3 o-py-1 o-text-xs o-font-medium o-text-brand-600 dark:o-text-brand-400">
-            <Signe taille="0.9rem" />
-            Genere par odoro create
+            <Mark size="0.9rem" />
+            Generated by odoro create
           </span>
 
           <h1 className="o-mt-6 o-max-w-3xl o-text-5xl o-font-bold o-tracking-tight md:o-text-6xl">
-            Votre premiere page, <span className="o-text-brand-500">deja vivante</span>.
+            Your first page, <span className="o-text-brand-500">already alive</span>.
           </h1>
 
           <p className="o-mt-5 o-max-w-xl o-text-lg o-text-zinc-500 dark:o-text-zinc-400">
-            Le routeur, les animations et le systeme de style viennent de la meme
-            librairie. Modifiez cette page : elle se recharge sans perdre son etat.
+            The router, the animations and the style system all come from the same
+            library. Edit this page: it reloads without losing its state.
           </p>
         </Reveal>
 
         <Stagger step={70} className="o-mt-8 o-flex o-flex-wrap o-items-center o-gap-3">
           <a
-            href="#piliers"
+            href="#pillars"
             className={`o-no-underline ${buttonClasses({ tone: 'primary' })}`}
           >
-            Voir ce qui est inclus
+            See what is included
           </a>
           <a
             href="https://odoro.dev/docs"
@@ -355,19 +355,19 @@ function Hero(): ReactElement {
         </Stagger>
 
         <Stagger step={60} className="o-mt-6 o-flex o-flex-wrap o-gap-2">
-          {FAITS.map((fait) => (
+          {FACTS.map((fact) => (
             <span
-              key={fait}
+              key={fact}
               className="o-rounded-full o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-px-3 o-py-1 o-text-xs o-text-zinc-500 dark:o-text-zinc-400"
             >
-              {fait}
+              {fact}
             </span>
           ))}
         </Stagger>
 
         <Reveal>
           <div className="o-mt-14">
-            <Fenetre />
+            <Window />
           </div>
         </Reveal>
       </div>
@@ -375,50 +375,49 @@ function Hero(): ReactElement {
   )
 }
 
-/** Ce que le projet a deja sous la main. */
-const PILIERS = [
+/** What the project already has at hand. */
+const PILLARS = [
   {
-    titre: 'Routeur',
-    texte:
-      'Segments dynamiques, routes imbriquees, chargement paresseux et transitions de page.',
+    title: 'Router',
+    text: 'Dynamic segments, nested routes, lazy loading and page transitions.',
   },
   {
-    titre: 'Animations',
-    texte:
-      "Une couche mince sur le moteur du navigateur. Le mouvement reduit est respecte d'office.",
+    title: 'Animations',
+    text:
+      "A thin layer over the browser's own engine. Reduced motion is respected out of the box.",
   },
   {
-    titre: 'Styles',
-    texte: 'Des jetons en source de verite, une feuille statique, aucun scan a l execution.',
+    title: 'Styles',
+    text: 'Tokens as the source of truth, a static stylesheet, no scanning at runtime.',
   },
 ]
 
-/** La section des piliers. */
-function Piliers(): ReactElement {
+/** The pillars section. */
+function Pillars(): ReactElement {
   return (
     <section
-      id="piliers"
+      id="pillars"
       className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-20"
     >
       <div className="o-mx-auto o-w-full o-max-w-5xl">
         <h2 className="o-text-sm o-font-semibold o-uppercase o-tracking-widest o-text-zinc-400">
-          Ce qui est deja la
+          What is already here
         </h2>
 
         <Stagger step={90} className="o-mt-8 o-grid o-gap-4 md:o-grid-cols-3">
-          {PILIERS.map((pilier, index) => (
+          {PILLARS.map((pillar, index) => (
             <article
-              key={pilier.titre}
+              key={pillar.title}
               className="o-rounded-xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-6"
             >
               <span className="o-font-mono o-text-xs o-text-brand-500">
                 {String(index + 1).padStart(2, '0')}
               </span>
               <h3 className="o-mt-3 o-text-lg o-font-semibold o-tracking-tight">
-                {pilier.titre}
+                {pillar.title}
               </h3>
               <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-                {pilier.texte}
+                {pillar.text}
               </p>
             </article>
           ))}
@@ -428,46 +427,46 @@ function Piliers(): ReactElement {
   )
 }
 
-/** La commande que l'on copie le plus souvent. */
-const COMMANDE = 'odoro add text/count-up'
+/** The command people copy the most. */
+const COMMAND = 'odoro add text/count-up'
 
-/** La cloture : une commande, et la porte vers le catalogue. */
-function Cloture(): ReactElement {
-  const [copie, setCopie] = useState(false)
+/** The closing: one command, and the door to the catalogue. */
+function Closing(): ReactElement {
+  const [copied, setCopied] = useState(false)
 
   return (
     <section className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-24">
       <div className="o-mx-auto o-w-full o-max-w-3xl o-text-center">
         <Reveal>
           <h2 className="o-text-3xl o-font-bold o-tracking-tight md:o-text-4xl">
-            Ajoutez un composant, sans quitter le terminal.
+            Add a component without leaving the terminal.
           </h2>
           <p className="o-mx-auto o-mt-4 o-max-w-prose o-text-zinc-500 dark:o-text-zinc-400">
-            Le registre copie le code dans votre projet. Il vous appartient : on le lit,
-            on le modifie, il ne se met pas a jour dans votre dos.
+            The registry copies the code into your project. It is yours: you read it,
+            you change it, it never updates behind your back.
           </p>
 
           <div className="o-mx-auto o-mt-8 o-flex o-max-w-md o-items-center o-gap-2 o-rounded-xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-zinc-50 dark:o-bg-zinc-900 o-p-2 o-pl-4">
-            <code className="o-flex-1 o-text-left o-font-mono o-text-sm">{COMMANDE}</code>
+            <code className="o-flex-1 o-text-left o-font-mono o-text-sm">{COMMAND}</code>
             <button
               type="button"
               className={buttonClasses({ tone: 'ghost', size: 'sm' })}
               onClick={() => {
-                // Le presse-papiers peut etre refuse — hors contexte sur, ou
-                // permission retiree. L'echec ne casse pas la page : le libelle
-                // ne change simplement pas.
+                // The clipboard can be refused — outside a secure context, or
+                // permission withdrawn. The failure does not break the page:
+                // the label simply does not change.
                 void navigator.clipboard
-                  ?.writeText(COMMANDE)
+                  ?.writeText(COMMAND)
                   .then(() => {
-                    setCopie(true)
+                    setCopied(true)
                     setTimeout(() => {
-                      setCopie(false)
+                      setCopied(false)
                     }, 1600)
                   })
                   .catch(() => undefined)
               }}
             >
-              {copie ? 'Copie' : 'Copier'}
+              {copied ? 'Copied' : 'Copy'}
             </button>
           </div>
 
@@ -477,7 +476,7 @@ function Cloture(): ReactElement {
             rel="noreferrer"
             className="o-mt-6 o-inline-block o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-brand-500"
           >
-            Parcourir le catalogue
+            Browse the catalogue
           </a>
         </Reveal>
       </div>
@@ -489,70 +488,70 @@ function Cloture(): ReactElement {
 /*  Pages                                                                      */
 /* -------------------------------------------------------------------------- */
 
-/** La page d'accueil. */
-function Accueil(): ReactElement {
+/** The home page. */
+function Home(): ReactElement {
   return (
     <>
       <Hero />
-      <Piliers />
-      <Cloture />
+      <Pillars />
+      <Closing />
     </>
   )
 }
 
 /**
- * Ce que chaque paquet de la famille apporte.
+ * What each package of the family brings.
  *
- * La table decrit ; elle ne decide pas. Ce qui s'affiche vient du manifeste du
- * projet, donc de ce qui a reellement ete installe — et cela reste vrai si vous
- * ajoutez ou retirez un paquet plus tard.
+ * The table describes; it does not decide. What shows comes from the manifest
+ * of the project, hence from what was actually installed — and that stays true
+ * if you add or remove a package later.
  */
 const ROLES: Readonly<Record<string, string>> = {
-  odoro: 'Serveur de developpement, compilation et registre',
-  '@odoro-cli/libs': 'Jetons, utilitaires, composants et routeur',
-  '@odoro-cli/icons': 'Cinq familles d icones, importables une a une',
-  '@odoro-cli/engine': 'WebGL, surfaces et politique de mouvement',
-  '@odoro-cli/server': 'Socle back-end modulaire',
+  odoro: 'Development server, build and registry',
+  '@odoro-cli/libs': 'Tokens, utilities, components and router',
+  '@odoro-cli/icons': 'Five icon families, importable one by one',
+  '@odoro-cli/engine': 'WebGL, surfaces and motion policy',
+  '@odoro-cli/server': 'Modular back-end foundation',
 }
 
 /**
- * Les paquets de la famille presents dans ce projet.
+ * The packages of the family present in this project.
  *
- * Les deux champs sont lus, car `odoro` est une dependance de developpement
- * quand les autres sont des dependances de production. Une liste ecrite a la
- * main mentirait des la premiere case decochee a la creation.
+ * Both fields are read, because `odoro` is a development dependency where the
+ * others are production dependencies. A hand-written list would start lying at
+ * the first box left unticked at creation.
  */
-const REPERES = Object.entries({ ...dependencies, ...devDependencies })
-  .filter(([nom]) => nom in ROLES)
+const LANDMARKS = Object.entries({ ...dependencies, ...devDependencies })
+  .filter(([name]) => name in ROLES)
   .sort(([a], [b]) => a.localeCompare(b))
-  .map(([nom, version]) => ({ nom, version, role: ROLES[nom] ?? '' }))
+  .map(([name, version]) => ({ name, version, role: ROLES[name] ?? '' }))
 
-/** Une seconde page, pour montrer le routeur a l'oeuvre. */
-function APropos(): ReactElement {
+/** A second page, to show the router at work. */
+function About(): ReactElement {
   return (
     <section className="o-px-6 o-py-24">
       <div className="o-mx-auto o-w-full o-max-w-3xl">
         <Reveal>
-          <h1 className="o-text-4xl o-font-bold o-tracking-tight">A propos</h1>
+          <h1 className="o-text-4xl o-font-bold o-tracking-tight">About</h1>
           <p className="o-mt-4 o-text-zinc-500 dark:o-text-zinc-400">
-            Cette page existe pour montrer le routeur : la navigation ne recharge rien,
-            et la transition est celle du navigateur.
+            This page exists to show the router: navigating reloads nothing, and the
+            transition is the one the browser provides.
           </p>
 
           <dl className="o-mt-10 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
-            {REPERES.map((repere) => (
+            {LANDMARKS.map((landmark) => (
               <div
-                key={repere.nom}
+                key={landmark.name}
                 className="o-flex o-flex-col md:o-flex-row o-gap-1 md:o-gap-6 o-border-b o-border-zinc-200 dark:o-border-zinc-800 o-py-4"
               >
                 <dt className="o-w-56 o-shrink-0 o-font-mono o-text-sm o-font-medium">
-                  {repere.nom}
+                  {landmark.name}
                   <span className="o-ml-2 o-text-xs o-font-normal o-text-zinc-400">
-                    {repere.version}
+                    {landmark.version}
                   </span>
                 </dt>
                 <dd className="o-m-0 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-                  {repere.role}
+                  {landmark.role}
                 </dd>
               </div>
             ))}
@@ -563,59 +562,70 @@ function APropos(): ReactElement {
   )
 }
 
-/** Ce qui s'affiche quand aucune route ne correspond. */
-function Introuvable(): ReactElement {
+/** What shows when no route matches. */
+function NotFound(): ReactElement {
   return (
     <section className="o-px-6 o-py-32 o-text-center">
       <p className="o-font-mono o-text-sm o-text-brand-500">404</p>
       <h1 className="o-mt-3 o-text-3xl o-font-bold o-tracking-tight">
-        Cette page n existe pas.
+        This page does not exist.
       </h1>
       <Link to="/" className="o-mt-6 o-inline-block o-text-sm">
-        Retour a l accueil
+        Back to home
       </Link>
     </section>
   )
 }
 
 /* -------------------------------------------------------------------------- */
-/*  Racine                                                                     */
+/*  Root                                                                       */
 /* -------------------------------------------------------------------------- */
 
-/** L'enveloppe commune : barre, contenu, pied de page. */
-function Coquille(contenu: ReactNode): ReactElement {
+/** The common shell: nav, content, footer. */
+function Shell(content: ReactNode): ReactElement {
   return (
-    // `relative` porte le fond decoratif, qui se place en absolu dedans. Il est
-    // pose ici et non dans la page : ancre au haut de `main`, il commencait
-    // sous la barre, et la bande restee derriere elle se voyait en haut de
-    // page comme un rectangle plus sombre.
+    // `relative` carries the decorative background, which places itself
+    // absolutely inside it. It sits here and not in the page: anchored to the
+    // top of `main`, it started below the bar, and the strip left behind it
+    // showed at the top of the page as a darker rectangle.
     <div className="app-shell o-relative">
-      <Fond />
-      <Barre />
-      <main className="o-relative o-view-transition-page">{contenu}</main>
+      <Background />
+      <Nav />
+      <main className="o-relative o-view-transition-page">{content}</main>
       <footer className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-8">
         <div className="o-mx-auto o-flex o-w-full o-max-w-5xl o-items-center o-justify-between o-gap-4 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
           <span className="o-inline-flex o-items-center o-gap-2">
             <span className="o-text-brand-500">
-              <Signe taille="1.1rem" />
+              <Mark size="1.1rem" />
             </span>
             <span className="o-font-semibold o-tracking-wide">ODORO</span>
           </span>
-          <span>Construit avec Odoro.</span>
+          <span>Built with Odoro.</span>
         </div>
       </footer>
     </div>
   )
 }
 
-/** Racine de l'application. */
-export function App(): ReactElement {
+/** What the application receives. */
+export interface AppProps {
+  /**
+   * The address to render, during prerendering.
+   *
+   * Absent in the browser: there, the address bar is the truth.
+   */
+  readonly url?: string
+}
+
+/** Root of the application. */
+export function App({ url }: AppProps = {}): ReactElement {
   return (
-    <Routeur
-      enveloppe={Coquille}
-      accueil={<Accueil />}
-      apropos={<APropos />}
-      introuvable={<Introuvable />}
+    <Router
+      shell={Shell}
+      home={<Home />}
+      about={<About />}
+      notFound={<NotFound />}
+      url={url}
     />
   )
 }