odoro 0.3.4 → 1.0.1

package/templates/react-ts-server/client/src/composants/Marque.tsx

@@ -0,0 +1,50 @@
+/**
+ * La marque : le signe et le mot.
+ *
+ * ## Pourquoi le signe est dessine ici, et non charge
+ *
+ * Un fichier dans `public/` serait une image de plus a telecharger, et surtout
+ * une image d'une seule couleur. Le signe est dessine en SVG dans le flux, avec
+ * `currentColor` : il prend la couleur de son parent, donc la teinte de marque
+ * en clair comme en sombre, sans qu'on ait deux fichiers a tenir.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Le signe seul, a la taille de la police qui l'entoure. */
+export function Signe({ className = '' }: { readonly className?: string }): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+      // La taille est en style, et non en classe : elle suit la police qui
+      // entoure le signe, et une classe utilitaire a valeur arbitraire n'est
+      // emise que si le compilateur l'a vue passer. Absente, elle laisserait
+      // un SVG sans dimensions — donc invisible, sans rien pour le signaler.
+      style={{ width: '1.15em', height: '1.15em', flexShrink: 0 }}
+    >
+      <path
+        d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinejoin="miter"
+      />
+    </svg>
+  )
+}
+
+/** Le signe et le mot, tels qu'ils vont dans une barre de navigation. */
+export function Marque(): ReactElement {
+  return (
+    <span className="o-inline-flex o-items-center o-gap-2 o-font-semibold o-tracking-tight">
+      <span className="o-text-brand-500">
+        <Signe />
+      </span>
+      Odoro
+    </span>
+  )
+}

package/templates/react-ts-server/client/src/routes/About.tsx

@@ -1,19 +1,43 @@
+/**
+ * Une seconde page, pour montrer le routeur a l'oeuvre.
+ *
+ * @module
+ */
+
 import { Reveal } from '@odoro-cli/libs/motion'
-import { Link } from '@odoro-cli/libs/router'
+import type { ReactElement } from 'react'
+
+/** Ce que le projet embarque, tel qu'il a ete cree. */
+const REPERES: readonly { readonly cle: string; readonly valeur: string }[] = [
+  { cle: 'Moteur', valeur: 'odoro — serveur de developpement et compilation' },
+  { cle: 'Styles', valeur: '@odoro-cli/libs — jetons, utilitaires, composants' },
+  { cle: 'Registre', valeur: 'register.odoro.dev — copie dans votre projet' },
+]
 
-/** Page « a propos », qui demontre la navigation entre routes. */
-export function About() {
+/** Page « A propos ». */
+export function About(): ReactElement {
   return (
-    <Reveal className="o-flex o-flex-col o-gap-6">
-      <h1 className="o-text-3xl o-font-bold o-tracking-tight">A propos</h1>
-      <p className="o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
-        Cette page est servie par le routeur d Odoro. La navigation ne recharge pas le
-        document : elle passe par l historique du navigateur, restaure la position de
-        defilement et joue une transition de page quand le navigateur la prend en charge.
-      </p>
-      <p>
-        <Link to="/">Retour a l accueil</Link>
-      </p>
-    </Reveal>
+    <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>
+          <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.
+          </p>
+
+          <dl className="o-mt-10 o-divide-y o-divide-zinc-200 dark:o-divide-zinc-800 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
+            {REPERES.map((repere) => (
+              <div key={repere.cle} className="o-flex o-flex-col md:o-flex-row o-gap-1 md:o-gap-6 o-py-4">
+                <dt className="o-w-32 o-shrink-0 o-text-sm o-font-medium">{repere.cle}</dt>
+                <dd className="o-m-0 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+                  {repere.valeur}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </Reveal>
+      </div>
+    </section>
   )
 }

package/templates/react-ts-server/client/src/routes/Home.tsx

@@ -1,148 +1,28 @@
-import { useEffect, useState } from 'react'
-
-import { Reveal, Stagger } from '@odoro-cli/libs/motion'
-import { Link } from '@odoro-cli/libs/router'
-import { Button } from '@odoro-cli/libs/ui'
-
-/** Reponse de la route de sante du serveur. */
-interface Health {
-  status: string
-  environment: string
-  uptime: number
-  timestamp: string
-}
-
-/** Etat de l'appel a l'API. */
-type Fetching =
-  | { state: 'inactif' }
-  | { state: 'en-cours' }
-  | { state: 'ok'; health: Health }
-  | { state: 'echec'; message: string }
-
 /**
- * Interroge la route de sante du serveur.
+ * La page d'accueil : le fond, puis les sections.
  *
- * L'URL est relative : en developpement le moteur transmet l'appel au serveur,
- * en production c'est le meme serveur qui repond. Il n'y a donc jamais d'URL
- * d'API a configurer cote client.
+ * Elle ne fait que les mettre bout a bout. Chaque section vit dans son propre
+ * fichier, si bien qu'en retirer une, en ajouter une ou en changer l'ordre se
+ * lit ici en une ligne.
+ *
+ * @module
  */
-async function fetchHealth(signal: AbortSignal): Promise<Health> {
-  const response = await fetch('/api/health', { signal })
-  if (!response.ok) throw new Error(`Le serveur a repondu ${response.status}.`)
-  return (await response.json()) as Health
-}
-
-/** Panneau montrant l'etat de la liaison avec l'API. */
-function ApiStatus() {
-  const [result, setResult] = useState<Fetching>({ state: 'inactif' })
-  const [attempt, setAttempt] = useState(0)
-
-  useEffect(() => {
-    const controller = new AbortController()
-    setResult({ state: 'en-cours' })
 
-    fetchHealth(controller.signal).then(
-      (health) => setResult({ state: 'ok', health }),
-      (cause: unknown) => {
-        if (controller.signal.aborted) return
-        setResult({
-          state: 'echec',
-          message: cause instanceof Error ? cause.message : String(cause),
-        })
-      },
-    )
+import type { ReactElement } from 'react'
 
-    return () => controller.abort()
-  }, [attempt])
-
-  return (
-    <section className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5">
-      <div className="o-flex o-items-center o-justify-between o-gap-4">
-        <h2 className="o-font-semibold">Liaison avec l&rsquo;API</h2>
-        <Button
-          size="sm"
-          tone="secondary"
-          loading={result.state === 'en-cours'}
-          onClick={() => setAttempt((value) => value + 1)}
-        >
-          Reinterroger
-        </Button>
-      </div>
-
-      <div className="o-mt-3 o-text-sm" role="status">
-        {result.state === 'inactif' || result.state === 'en-cours' ? (
-          <p className="o-text-zinc-500 dark:o-text-zinc-400">
-            Interrogation de /api/health...
-          </p>
-        ) : result.state === 'echec' ? (
-          <p className="o-text-red-600 dark:o-text-red-400">
-            Serveur injoignable : {result.message}. Verifiez qu&rsquo;il tourne bien sur
-            le port 3001.
-          </p>
-        ) : (
-          <dl className="o-grid o-grid-cols-2 o-gap-2 o-tabular-nums">
-            <dt className="o-text-zinc-500 dark:o-text-zinc-400">Etat</dt>
-            <dd className="o-text-emerald-600 dark:o-text-emerald-400">
-              {result.health.status}
-            </dd>
-            <dt className="o-text-zinc-500 dark:o-text-zinc-400">Environnement</dt>
-            <dd>{result.health.environment}</dd>
-            <dt className="o-text-zinc-500 dark:o-text-zinc-400">En ligne depuis</dt>
-            <dd>{result.health.uptime} s</dd>
-          </dl>
-        )}
-      </div>
-    </section>
-  )
-}
-
-/** Trois arguments mis en avant sur la page d'accueil. */
-const FEATURES = [
-  {
-    title: 'Une seule origine',
-    body: 'Les appels /api sont transmis au serveur : aucune question de CORS, aucune URL a configurer.',
-  },
-  {
-    title: 'Un seul deploiement',
-    body: 'En production, le serveur sert l API et le client compile. Une image, un processus.',
-  },
-  {
-    title: 'Un environnement verifie',
-    body: 'Les variables sont validees au demarrage. Une configuration incomplete arrete le serveur tout de suite.',
-  },
-]
+import { Cloture } from '@/sections/Cloture'
+import { Fond } from '@/sections/Fond'
+import { Hero } from '@/sections/Hero'
+import { Piliers } from '@/sections/Piliers'
 
 /** Page d'accueil. */
-export function Home() {
+export function Home(): ReactElement {
   return (
-    <div className="o-flex o-flex-col o-gap-12">
-      <Reveal>
-        <h1 className="o-text-4xl o-font-bold o-tracking-tight">Client et serveur.</h1>
-        <p className="o-mt-4 o-text-lg o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
-          Ce projet reunit une application React et une API Express dans un seul depot. Le
-          panneau ci-dessous interroge le serveur pour de vrai.
-        </p>
-      </Reveal>
-
-      <ApiStatus />
-
-      <Stagger step={80} className="o-grid o-grid-cols-1 md:o-grid-cols-3 o-gap-4">
-        {FEATURES.map((feature) => (
-          <article
-            key={feature.title}
-            className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5"
-          >
-            <h2 className="o-font-semibold">{feature.title}</h2>
-            <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-              {feature.body}
-            </p>
-          </article>
-        ))}
-      </Stagger>
-
-      <p>
-        <Link to="/a-propos">En savoir plus</Link>
-      </p>
-    </div>
+    <>
+      <Fond />
+      <Hero />
+      <Piliers />
+      <Cloture />
+    </>
   )
 }

package/templates/react-ts-server/client/src/sections/Cloture.tsx

@@ -0,0 +1,69 @@
+/**
+ * La cloture : une commande, et la porte de sortie vers la documentation.
+ *
+ * Une page d'accueil qui s'arrete sur sa derniere carte laisse le visiteur
+ * sans geste suivant. Celle-ci se termine par ce qu'il y a a taper.
+ *
+ * @module
+ */
+
+import { Reveal } from '@odoro-cli/libs/motion'
+import { buttonClasses } from '@odoro-cli/libs/ui'
+import { useState, type ReactElement } from 'react'
+
+/** La commande que l'on copie le plus souvent. */
+const COMMANDE = 'odoro add text/count-up'
+
+/** La section de cloture. */
+export function Cloture(): ReactElement {
+  const [copie, setCopie] = 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.
+          </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.
+          </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>
+            <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 doit pas casser la page : le
+                // libelle ne change simplement pas.
+                void navigator.clipboard
+                  ?.writeText(COMMANDE)
+                  .then(() => {
+                    setCopie(true)
+                    setTimeout(() => {
+                      setCopie(false)
+                    }, 1600)
+                  })
+                  .catch(() => undefined)
+              }}
+            >
+              {copie ? 'Copie' : 'Copier'}
+            </button>
+          </div>
+
+          <a
+            href="https://odoro.dev/docs/registry"
+            target="_blank"
+            rel="noreferrer"
+            className="o-mt-6 o-inline-block o-text-sm o-text-zinc-500 dark:o-text-zinc-400 hover:o-text-brand-500"
+          >
+            Parcourir le catalogue
+          </a>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts-server/client/src/sections/Fond.tsx

@@ -0,0 +1,42 @@
+/**
+ * Le fond decoratif de la page.
+ *
+ * ## Ce qu'il est, et ce qu'il remplace
+ *
+ * Deux nappes de couleur de marque, tres diluees, posees en haut de page. Rien
+ * ne bouge : c'est un degrade, pas une animation — il ne coute aucune image par
+ * seconde et se dessine avant le premier octet de JavaScript.
+ *
+ * Si le moteur a ete retenu a la creation, ce fichier est remplace par une
+ * version qui ouvre une surface WebGL animee. Le reste de la page ne sait pas
+ * d'ou vient son fond : elle place `<Fond />` et n'en demande pas plus.
+ *
+ * @module
+ */
+
+import type { ReactElement } from 'react'
+
+/** Deux nappes de marque, diluees, derriere le contenu. */
+export function Fond(): ReactElement {
+  return (
+    <div
+      aria-hidden="true"
+      className="o-pointer-events-none o-absolute o-inset-x-0 o-top-0 o-h-[42rem] o-overflow-hidden"
+    >
+      <div
+        className="o-absolute o-left-1/2 o-top-[-18rem] o-size-[46rem] o--translate-x-1/2 o-rounded-full o-blur-3xl o-opacity-30 dark:o-opacity-25"
+        style={{
+          background:
+            'radial-gradient(closest-side, var(--o-palette-brand-500), transparent)',
+        }}
+      />
+      <div
+        className="o-absolute o-right-[-10rem] o-top-[6rem] o-size-[30rem] o-rounded-full o-blur-3xl o-opacity-20 dark:o-opacity-20"
+        style={{
+          background:
+            'radial-gradient(closest-side, var(--o-palette-brand-400), transparent)',
+        }}
+      />
+    </div>
+  )
+}

package/templates/react-ts-server/client/src/sections/Hero.tsx

@@ -0,0 +1,119 @@
+/**
+ * Le hero : la promesse, l'installation, et la fenetre du produit.
+ *
+ * ## Le dessin est celui d'odoro.dev
+ *
+ * Meme typographie — un titre serre, une phrase de soutien plus claire —,
+ * memes pastilles de faits, meme fenetre de navigateur posee sous le pli. Un
+ * projet qui demarre ressemble donc a ce qu'il peut devenir, au lieu de partir
+ * d'une page blanche qu'il faudra jeter.
+ *
+ * ## Ce qui n'y est pas
+ *
+ * Aucun composant du registre. Le hero se contente de ce que les bibliotheques
+ * apportent : les classes, `Reveal` et `Stagger`. C'est ce qui lui permet
+ * d'exister quel que soit ce qui a ete coche a la creation.
+ *
+ * @module
+ */
+
+import { Reveal, Stagger } from '@odoro-cli/libs/motion'
+import { buttonClasses } from '@odoro-cli/libs/ui'
+import type { ReactElement } from 'react'
+
+import { Signe } from '@/composants/Marque'
+
+/** Quatre faits, pas quatre slogans. */
+const FAITS = ['Zero configuration', 'Theme clair et sombre', 'Mouvement reduit respecte']
+
+/** Ce que la fenetre montre : une page en quelques lignes. */
+const EXTRAIT = `export function Accueil() {
+  return (
+    <Reveal>
+      <h1 className="o-text-6xl o-font-bold">
+        Votre premiere page.
+      </h1>
+    </Reveal>
+  )
+}`
+
+/**
+ * Une fenetre de navigateur miniature.
+ *
+ * Les trois pastilles sont decoratives : elles disent « navigateur » sans rien
+ * ajouter a ce qu'un lecteur d'ecran doit entendre.
+ */
+function Fenetre(): 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">
+        <span className="o-flex o-gap-1.5" aria-hidden="true">
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+          <span className="o-size-2.5 o-rounded-full o-bg-zinc-300 dark:o-bg-zinc-700" />
+        </span>
+        <span className="o-ml-2 o-font-mono o-text-xs o-text-zinc-400">src/routes/Home.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}
+      </pre>
+    </div>
+  )
+}
+
+/** Le hero de la page d'accueil. */
+export function Hero(): ReactElement {
+  return (
+    <section className="o-relative o-px-6 o-pb-20 o-pt-24 md:o-pt-32">
+      <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 />
+            Genere par 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>.
+          </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.
+          </p>
+        </Reveal>
+
+        <Stagger step={70} className="o-mt-8 o-flex o-flex-wrap o-items-center o-gap-3">
+          <a href="#piliers" className={`o-no-underline ${buttonClasses({ tone: 'primary' })}`}>
+            Voir ce qui est inclus
+          </a>
+          <a
+            href="https://odoro.dev/docs"
+            className={`o-no-underline ${buttonClasses({ tone: 'secondary' })}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Documentation
+          </a>
+        </Stagger>
+
+        <Stagger step={60} className="o-mt-6 o-flex o-flex-wrap o-gap-2">
+          {FAITS.map((fait) => (
+            <span
+              key={fait}
+              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}
+            </span>
+          ))}
+        </Stagger>
+
+        <Reveal>
+          <div className="o-mt-14">
+            <Fenetre />
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts-server/client/src/sections/Piliers.tsx

@@ -0,0 +1,68 @@
+/**
+ * Trois piliers : ce que le projet a deja sous la main.
+ *
+ * Les cartes s'ecrivent avec la meme grammaire que sur odoro.dev — bordure
+ * fine, coin arrondi, titre serre, phrase en gris — pour qu'ajouter une section
+ * plus tard ne demande pas d'inventer un style.
+ *
+ * @module
+ */
+
+import { Stagger } from '@odoro-cli/libs/motion'
+import type { ReactElement } from 'react'
+
+/** Un pilier : un numero, un titre, une phrase. */
+interface Pilier {
+  readonly titre: string
+  readonly texte: string
+}
+
+const PILIERS: readonly Pilier[] = [
+  {
+    titre: 'Routeur',
+    texte:
+      'Segments dynamiques, routes imbriquees, chargement paresseux et transitions de page.',
+  },
+  {
+    titre: 'Animations',
+    texte:
+      "Une couche mince sur le moteur du navigateur. Le mouvement reduit est respecte d'office.",
+  },
+  {
+    titre: 'Styles',
+    texte:
+      'Des jetons en source de verite, une feuille statique, aucun scan a l execution.',
+  },
+]
+
+/** La section des piliers. */
+export function Piliers(): ReactElement {
+  return (
+    <section id="piliers" 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
+        </h2>
+
+        <Stagger step={90} className="o-mt-8 o-grid o-gap-4 md:o-grid-cols-3">
+          {PILIERS.map((pilier, index) => (
+            <article
+              key={pilier.titre}
+              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}
+              </h3>
+              <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+                {pilier.texte}
+              </p>
+            </article>
+          ))}
+        </Stagger>
+      </div>
+    </section>
+  )
+}

package/templates/react-ts-server/client/src/styles.css

@@ -1,10 +1,9 @@
 /* Styles propres a l'application.
-   Tout le reste vient des tokens Odoro : surcharger une variable ci-dessous
-   suffit a rethemer l'ensemble, composants de la librairie compris. */
 
-:root {
-  --o-color-primary: oklch(52.4% 0.212 275);
-}
+   Tout le reste vient des jetons Odoro : surcharger une variable ci-dessous
+   retheme l'ensemble, composants de la librairie compris. La teinte de marque
+   est `--o-palette-brand-500` ; la remplacer suffit a changer la couleur de la
+   page, du signe et des boutons d'un seul coup. */
 
 .app-shell {
   min-height: 100dvh;