odoro 1.0.9 → 2.0.0

package/templates/react-ts-server/{_variantes/sans-routeur → _variants/without-router}/client/src/App.tsx

@@ -1,20 +1,20 @@
 /**
- * Toute la page, en un fichier.
+ * The whole page, in one file.
  *
- * ## Une seule page
+ * ## A single page
  *
- * Le routeur n'a pas ete retenu a la creation : il n'y a donc ni `router.tsx`
- * ni navigation entre pages, et les sections se suivent. Le dessin est le meme
- * que dans la version routee.
+ * The router was not picked at creation: there is therefore no `router.tsx`
+ * and no navigation between pages, and the sections simply follow one another.
+ * The design is the same as in the routed version.
  *
- * Pour en ajouter un plus tard, `@odoro-cli/libs/router` est deja installe : il
- * vient avec les bibliotheques.
+ * To add one later, `@odoro-cli/libs/router` is already installed: it comes
+ * with the libraries.
  *
- * ## 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
  */
@@ -23,26 +23,26 @@ import { Reveal, Stagger } from '@odoro-cli/libs/motion'
 import { buttonClasses } from '@odoro-cli/libs/ui'
 import { useEffect, useState, type CSSProperties, type ReactElement } from 'react'
 
-import { Fond } from '@/fond'
+import { Background } from '@/background'
 
 /* -------------------------------------------------------------------------- */
-/*  Marque                                                                     */
+/*  Brand                                                                      */
 /* -------------------------------------------------------------------------- */
 
 /**
- * Le signe de la marque.
+ * The brand mark.
  *
- * 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"
@@ -55,32 +55,32 @@ 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. 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. 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)',
 }
 
-/** La barre : la marque, et le lien vers le site. */
-function Barre(): ReactElement {
+/** The bar: the brand, 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">
         <span
           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-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
@@ -93,11 +93,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>
@@ -108,45 +108,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',
@@ -157,25 +157,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>
@@ -183,37 +183,37 @@ 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>
   )
 }
@@ -222,22 +222,22 @@ function BasculeTheme(): ReactElement {
 /*  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 App() {
+/** What the product window shows. */
+const SNIPPET = `export function App() {
   return (
     <Reveal>
       <h1 className="o-text-6xl o-font-bold">
-        Votre premiere page.
+        Your first page.
       </h1>
     </Reveal>
   )
 }`
 
-/** Une fenetre de navigateur miniature. */
-function Fenetre(): ReactElement {
+/** A miniature browser window. */
+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">
@@ -249,39 +249,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 moteur d animation et le systeme de style viennent de la meme librairie.
-            Modifiez cette page : elle se recharge sans perdre son etat.
+            The motion engine and the style system 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"
@@ -294,19 +294,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>
@@ -314,49 +314,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: '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.',
   },
   {
-    titre: 'Interface',
-    texte: 'Des composants qui lisent les memes jetons que votre code : les rethemer suffit.',
+    title: 'Interface',
+    text: 'Components that read the same tokens as your code: rethemed, they follow.',
   },
 ]
 
-/** 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>
           ))}
@@ -366,45 +366,45 @@ 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.
+                // The clipboard can be refused — outside a secure context, or
+                // permission withdrawn. The failure does not break the page.
                 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>
 
@@ -414,7 +414,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>
@@ -423,32 +423,32 @@ function Cloture(): ReactElement {
 }
 
 /* -------------------------------------------------------------------------- */
-/*  Racine                                                                     */
+/*  Root                                                                       */
 /* -------------------------------------------------------------------------- */
 
-/** Racine de l'application. */
+/** Root of the application. */
 export function App(): ReactElement {
   return (
-    // `relative` porte le fond, pose ici et non dans le contenu : ancre plus
-    // bas, il commencait sous la barre et laissait une bande plus sombre
-    // derriere elle en haut de page.
+    // `relative` carries the background, placed here and not in the content:
+    // anchored lower, it started below the bar and left a darker strip behind
+    // it at the top of the page.
     <div className="app-shell o-relative">
-      <Fond />
-      <Barre />
+      <Background />
+      <Nav />
       <main className="o-relative">
         <Hero />
-        <Piliers />
-        <Cloture />
+        <Pillars />
+        <Closing />
       </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>

package/templates/react-ts-server/_variants/without-router/client/src/entry-server.tsx

@@ -0,0 +1,39 @@
+/**
+ * The prerendering entry point.
+ *
+ * Without a router there is only one page: the list of routes comes down to
+ * the root. The rest is identical — `odoro build` renders this HTML at build
+ * time, and `src/main.tsx` hydrates it on load.
+ *
+ * To do without: remove `prerender` from `odoro.config.ts`, then this file.
+ *
+ * @module
+ */
+
+import { StrictMode } from 'react'
+import { renderToString } from 'react-dom/server'
+
+import { App } from '@/App'
+
+/** The routes rendered at build time. */
+export const routes = ['/']
+
+/**
+ * Renders the page.
+ *
+ * @returns The HTML of the container, and the tags to add to the head.
+ */
+export function render(): { html: string; head: string } {
+  return {
+    // `StrictMode` on both sides: a tree rendered without it here and with it
+    // in the browser does not always produce the same markup, and hydration
+    // would report a difference that is not one.
+    html: renderToString(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    ),
+    head:
+      '<meta name="description" content="An Odoro project: in-house engine, generated styles.">',
+  }
+}

package/templates/react-ts-server/client/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="fr">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,9 +7,9 @@
     <meta name="theme-color" content="#3b82f6" />
     <title>Odoro</title>
     <script>
-      // Applique le theme memorise avant la premiere peinture. Le faire depuis
-      // React arriverait trop tard : un visiteur en theme force verrait un
-      // eclair de l'autre theme, le temps que le script se charge.
+      // Applies the stored theme before the first paint. Doing it from React
+      // would come too late: a visitor on a forced theme would see a flash of
+      // the other one, for as long as the script takes to load.
       try {
         var theme = localStorage.getItem('odoro-theme')
         if (theme === 'light' || theme === 'dark')