# 07 — Domaines et sites **Statut : en cours · Phase : P2 · Mis à jour : 02/11/2026.** ## 1. Logique - **`recit.dev`** est la vitrine de la promesse globale : une source, tous les formats. Il montre ce qui marche **aujourd'hui**. - **`vision.recit.dev`** (décidé le 25/10/2026) dit **pourquoi** et **où ça va** : le problème, la thèse, les principes et leur prix, l'ordre des phases, et ce que Récit refuse de faire. C'est le pendant éditorial de recit.dev, pas une seconde vitrine : il ne décrit aucune fonctionnalité comme acquise et ne documente rien. Il n'apparaît pas dans le sélecteur de sites de l'en-tête (comme `recit.dev`), seulement dans le pied de page. - **`docs.recit.dev`** contient **toute** la documentation, pour tous les formats. - **Un sous-domaine par format**, nommé par le mot que l'utilisateur cherche : `presentation`, `motion`, `report`, `webtoon`, `book`, `roadmap`, `calendar`, `story`. C'est la vitrine du format : promesse, galerie jouable, gabarits. Les neuf formats de la 1.0 font partie de la vision (docs est porté par docs.recit.dev). Chaque site ouvre à la sortie de son format (P2, P4, P6, P7, P8, P9, P10, P11). Les sites des plans 10 à 14 (ordre accepté le 24/10) ouvrent après la 1.0 (P13 à P16). - **Sites d'outil** (acceptés le 24/10/2026, plans 10 et 14) : à côté de www, docs et components, un site peut présenter un outil ou un bloc qui n'est pas un format (form.recit.dev tant qu'il n'existe pas de format `form`, ai.recit.dev). Mêmes règles : vitrine écrite avec Récit, aucune doc propre. - **Chaque site existe dans toutes les langues configurées** (`/fr/…`), avec un sélecteur de langue (voir `09-langues-et-json.md` §6). Règle anti-doublon : **un sous-domaine de format ne contient pas de documentation**. Chaque « comment faire » renvoie vers `docs.recit.dev//…`. On évite ainsi deux docs qui divergent. Chaque site est **construit avec Récit** (Le framework de sites + `@recit/site-stories`) : on mange notre propre cuisine. La vitrine d'un format est elle-même écrite dans ce format. Le haut de `presentation.recit.dev` est un deck jouable, celui de `motion.recit.dev` une vidéo jouable, celui de `report.recit.dev` un rapport, celui de `webtoon.recit.dev` un épisode, celui de `book.recit.dev` un livre, celui de `roadmap.recit.dev` la roadmap de Récit elle-même, celui de `calendar.recit.dev` un vrai calendrier (sorties, meetups), celui de `story.recit.dev` une story. ## 2. Carte des domaines | Domaine | Rôle | Dossier | Contenu | Phase | | -------------------------- | --------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | **recit.dev** | vitrine globale | `sites/www` | promesse « Write once in Markdown, tell it everywhere », **une même source rendue côte à côte** en deck, vidéo et page de doc, cartes vers chaque format (icônes `fmt-*`), `npm create recit`, liens GitHub et npm | P2 | | **vision.recit.dev** | vision et ambition | `sites/vision` | décidé le 25/10/2026 : à quoi sert Récit, où il va, ce qu'il refuse. Pages : le problème, les neuf formats, les principes et leur coût, l'ordre des phases, les limites et les risques. **Aucune documentation** : la règle anti-doublon s'applique, tout « comment faire » renvoie vers docs.recit.dev | P2 | | **docs.recit.dev** | documentation | `sites/docs` | Getting started, Writing (syntaxe commune), Configuration (`recit.config.ts`), Formats › Deck / Motion / Docs (Le framework de sites) / …, Components, Theme, CLI, MCP, API, Reference. Recherche Pagefind | P2 | | **components.recit.dev** | composants | `sites/components` | tous les composants de `@recit/components`, chacun rendu dans chaque format (deck, page de doc, rapport, livre…), avec ses props et sa syntaxe Markdown à copier. Source unique de `ComponentShowcase` | P2 | | **presentation.recit.dev** | format `deck` | `sites/presentation` | hero en deck, galerie des decks (starter, tech-talk, showcase, pitch, course, mdx), gabarits à copier, console présentateur et télécommande en démo, export PDF | P2 | | **motion.recit.dev** | format `motion` | `sites/motion` | hero en vidéo jouable (navigateur), galerie en `16:9`, `1:1` et `9:16`, thèmes `warm-editorial` et `saas-product`, MP4 téléchargeables, « deck → vidéo » avec la même source | P4 | | **report.recit.dev** | format `report` | `sites/report` | hero en rapport (données Lorem) en HTML **et** en PDF côte à côte, galerie (`report-quarterly`, `report-study`), gabarits, démo « les chiffres viennent des données » (`:value`, `::chart`) | P6 | | **webtoon.recit.dev** | format `toon` | `sites/webtoon` | hero = épisode lisible au scroll, sélecteur de langue (même planche traduite), export en tranches, pont « épisode → vidéo 9:16 ». « webtoon » est le mot cherché, `toon` reste le nom technique | P7 | | **book.recit.dev** | format `book` | `sites/book` | hero = feuilleter un livre (édition web), téléchargement PDF et EPUB du même livre, gabarits (roman, manuel, thèse) | P8 | | **roadmap.recit.dev** | format `roadmap` | `sites/roadmap` | hero = **la roadmap publique de Récit** (générée depuis `sites/plans/pages/06-roadmap.md`), vues now-next-later, frise et kanban, galerie, gabarits (produit, open source, équipe), changelog et flux RSS | P9 | | **calendar.recit.dev** | format `calendar` | `sites/calendar` | hero = calendrier des sorties et des événements Récit (abonnement ICS), vues mois, semaine et agenda, galerie (meetups, cours, planning éditorial), démo JSON multilingue | P10 | | **story.recit.dev** | format `stories` | `sites/story` | hero = une story jouable (tap, swipe), rail de vignettes, galerie (lancement, rapport en cartes, événements à venir), export d'images et de vidéo | P11 | | **form.recit.dev** | site d'outil | `sites/form` | accepté (`10-formulaires.md`) : bloc `:::form` jouable en mode `mock`, contrat d'API rendu par le framework de sites, galerie | P13 | | **directory.recit.dev** | formats `glossary` et `directory` | `sites/directory` | accepté (`12-glossaire-annuaire.md`) : le glossaire de Récit, annuaire Lorem en fiches et tableau, démo bilingue | P14 | | **maps.recit.dev** | format `atlas` et bloc `::map` | `sites/maps` | accepté (`13-cartes.md`) : atlas Lorem jouable (format retenu pour P15), galerie des formes de carte, démo multilingue | P15 | | **ai.recit.dev** | site d'outil | `sites/ai` | accepté (`14-ia-scenario.md`) : MCP, skills et scénariste, story jouable avec sa bible, outils MCP générés depuis `@recit/mcp` | P16 | | **play.recit.dev** | studio en ligne | `sites/play` (ou `@recit/studio` déployé) | éditeur Markdown + aperçu pour les neuf formats | après P12 | ### Alias (redirections 301, aucun contenu propre) | Alias | Cible | Pourquoi | | ---------------------------------------------------------- | ------------------------------ | ------------------------------------------------------- | | `www.recit.dev` | `recit.dev` | usage | | `deck.recit.dev`, `slides.recit.dev` | `presentation.recit.dev` | nom technique du format et synonyme courant | | `video.recit.dev` | `motion.recit.dev/video` | simple redirection, voir la section 3 | | `toon.recit.dev` | `webtoon.recit.dev` | nom technique | | `stories.recit.dev` | `story.recit.dev` | nom technique du format | | `agenda.recit.dev`, `events.recit.dev` | `calendar.recit.dev` | synonymes courants | | `glossary.recit.dev` | `directory.recit.dev/glossary` | accepté (P14) : second format du site | | `glossaire.recit.dev`, `annuaire.recit.dev` | `directory.recit.dev/fr/…` | accepté (P14) : mots du backlog | | `cartes.recit.dev`, `atlas.recit.dev` | `maps.recit.dev` | accepté (P15) : mot du backlog, nom technique du format | | `scenario.recit.dev` | `ai.recit.dev/scenario` | accepté (P16) : mot du backlog | | `docs.recit.dev/` depuis `.recit.dev/docs` | — | un lien « Docs » sur chaque site de format | Règle des alias (tranchée le 24/10, plans 10 à 14, question 22 de `06-roadmap.md`) : le domaine principal porte le nom anglais ; les mots français du backlog et le nom technique du format deviennent des alias 301, jamais des sites. Doc des blocs transverses (accepté) : `docs.recit.dev/components/` pour `form`, `pixel`, `textcard`, `map` et `term` ; le contrat des formulaires sous la section API. ## 3. `motion`, et `video` en simple redirection **Décision (24/10/2026) : on garde `motion`.** La vidéo n'est pas un format à part, c'est une sortie du format `motion`. | | Vidéo | Animation web | | ----------------------------- | -------------------------- | --------------------------------------------- | | Sortie | fichier MP4 ou GIF | lecture dans le navigateur (embed, page, doc) | | Rendu | Remotion + Chrome Headless | moteur de blocs `@recit/motion-blocks` | | Source, blocs, thèmes, timing | **identiques** | **identiques** | - Un seul site, **`motion.recit.dev`**, avec une section `/video` (export MP4, formats sociaux, rendu en CI). - **`video.recit.dev` est une simple redirection 301** vers `motion.recit.dev/video`. Il n'y a ni site ni package `video`. ## 4. Architecture des sites ``` sites/www ┐ sites/vision │ sites/docs ├─ site + @recit/site-stories + @recit/site-kit sites/presentation │ • createSiteConfig({ site: "presentation" }) : en-tête, pied, logo, thème sites/motion │ • stories/ : récits de la galerie (section publish: du recit.config) sites/report │ sites/webtoon │ sites/book │ sites/roadmap │ sites/calendar │ sites/story │ sites/components │ sites/form │ ← acceptés (plans 10, 12, 13, 14), après la 1.0 sites/directory │ sites/maps │ sites/ai ┘ ``` ### Arborescence de docs.recit.dev (gabarit) Décidé le 27/10/2026 (audit DO-5). La règle : **l'onglet Documentation ne contient que ce que tout format lit**. Ce qui n'est vrai que d'un format descend sous `Formats › `. Sans cela, les pages motion auraient dû disputer l'onglet générique au deck, qui l'occupait seul. ``` Documentation Formats ├─ Getting started ├─ formats/overview │ ├─ quickstart ├─ Deck → formats/deck/overview │ └─ tutorial │ ├─ layouts ├─ Writing │ ├─ slide-options │ ├─ overview │ ├─ density-rules │ ├─ scenes ← le séparateur│ ├─ presenter-console │ ├─ code-math-diagrams │ ├─ smartphone-remote │ ├─ notes-and-steps │ └─ exporting │ └─ mdx └─ Motion → formats/motion ├─ Configuration └─ (les pages motion viennent ici) │ ├─ overview Theme │ └─ recit-config └─ (inchangé) ├─ Integrations │ └─ site └─ Reference ├─ cli ├─ accessibility └─ architecture ``` Un nouveau format ouvre une catégorie sous **Formats**, avec sa page `overview` en `link:`. Il n'ajoute **rien** à l'onglet Documentation, sauf si la syntaxe devient commune — auquel cas la page commune est réécrite dans le vocabulaire commun, comme `writing/slides` est devenu `writing/scenes`. Toute page déplacée garde son ancienne adresse par un `redirects:` du `recit.config.ts`. - **`@recit/site-kit`** (privé) : - en-tête commun avec le sélecteur de sites (Récit ▸ Presentation · Motion · Report · Webtoon · Book · Roadmap · Calendar · Story · Docs, puis Form, Directory, Maps et AI à leur ouverture) et le sélecteur de langue ; - pied de page avec les mentions de `NOTICE.md`, logos de `brand/`, tokens Q07 ; - `createSiteConfig()`, qui renvoie la base du `recit.config.ts` de chaque site (chaque site n'a qu'un `recit.config.ts`, plus de `recit.config.tsx`) ; - table `SITES`, de type `{ label, url, port }` (l'URL locale est dérivée du port ; l'icône du format est prévue, pas encore dans le type), seule source des liens inter-sites. - **Récits partagés** : les galeries réutilisent `examples/*`. `sites/presentation` lit `examples/deck-*` par `publish.decks` de son `recit.config.ts` (`defineConfig` injecte les plugins), ce qui évite de copier les sources. Les démos de la doc pointent vers les mêmes slugs. - **Liens inter-sites** : jamais en dur. On passe par `SITES[...]`, qui bascule automatiquement sur les ports locaux en dev. - **Ports locaux** : www `3000`, docs `3001`, presentation `3002`, motion `3003` (preview e2e `4303`), components `3010` et vision `3015` (preview e2e `4315`) sont déjà dans `packages/tools/site-kit/src/sites.ts`. Réservés ici et ajoutés à `sites.ts` à la création du site : report `3004`, webtoon `3005`, book `3006`, roadmap `3007`, calendar `3008`, story `3009`, puis (plans 10 à 14, acceptés le 24/10) form `3011`, directory `3012`, maps `3013`, ai `3014`. Cette table est la seule attribution : `SiteId` et `SITES` la reprennent à la création de chaque site. Script racine prévu, pas encore ajouté : `recit:sites:dev` lance tous les sites ouverts (`nx run-many -t dev -p 'sites/*'`). - **Recherche** : Pagefind par site. `docs.recit.dev` indexe aussi les slides de ses démos (`#slide-N`). Une recherche transverse est hors périmètre pour l'instant. - **SEO** : `canonical` vers le domaine principal (jamais vers un alias), Open Graph par site (déclinaisons `og-card` avec l'icône du format), `sitemap.xml` par site. - **Couleur par site** (décision du 25/10/2026, table complète dans `01-assets.md` §1) : **recit.dev en noir et blanc**, **graphite** pour docs, components et les sites d'outil (form, ai), et une teinte par format — deck bleu, motion violet, report sarcelle, webtoon orange, book ambre, roadmap vert, calendar rouge, story magenta, maps indigo. `createSiteConfig()` pose les tokens `--primary` clair et sombre de la teinte du site depuis `brand/boards/colors/palette.json` ; le logo, le favicon et la carte OG du site sont ceux de sa teinte. Un site n'écrit jamais une couleur en dur. ### Composants habituels de chaque site de format Tous les sites de format ont la même structure. Ces composants viennent de `@recit/site-kit`, et ils sont alimentés par les composants du format (`08-formats.md`) : | Composant | Rôle | Exemple sur roadmap.recit.dev | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | | `SiteHeader` | logo Q07 avec l'icône du format, sélecteur de sites, sélecteur de langue, thème clair/sombre, lien GitHub | — | | `FormatHero` | promesse en une phrase et **démo jouable écrite dans le format**, avec la source Markdown dépliable à côté | la roadmap de Récit, et son `.md` | | `SourceToggle` | bascule rendu / Markdown / JSON (montre l'équivalence de `09-langues-et-json.md`) | `product.md` ⇄ `product.json` | | `LocaleDemo` | la même page en deux langues, côte à côte | en / fr | | `FormatGallery` | galerie filtrable d'exemples (`StoryGallery` filtré par format) | produit, open source, équipe | | `TemplateCard` | gabarit à copier (`npm create recit -- --template roadmap-product`) | — | | `ComponentShowcase` | tous les composants du format, avec leurs props | `Timeline`, `Kanban`, `StatusBadge`… | | `ExportPanel` | exports du format, à télécharger. Un seul composant : il lit `exports.json` (`ExportManifestSchema` de `@recit/core`, `15-export-pdf.md`) et affiche les fichiers de chaque `kind` ; sans fichier ou sans entrée, pas de lien | ICS, RSS, PDF | | `BridgeCard` | ponts vers les autres formats | roadmap → calendar | | `DocsLinks` | renvois vers docs.recit.dev/ (aucune doc sur le site de format) | — | | `FormatFooter` | mentions de `NOTICE.md`, liens vers les autres formats, version | — | `sites/www` reprend `SiteHeader`, `FormatGallery` (tous formats), une grille des neuf formats avec leur statut, et la démo « une source, plusieurs rendus » (deck, motion, stories, report). ## 5. Déploiement : Vercel **Décision (24/10/2026) : tout est hébergé sur Vercel.** Un projet Vercel par site, dans une équipe Vercel `recit`. | Site | Projet Vercel | Racine du projet | Build | Ouverture | | ------------------------ | -------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `recit.dev` | `recit-www` | `sites/www` | `nx run www:build` | P2 | | `docs.recit.dev` | `recit-docs` | `sites/docs` | `nx run docs:build` | P2 | | `presentation.recit.dev` | `recit-presentation` | `sites/presentation` | `nx run presentation:build` | P2 | | `components.recit.dev` | `recit-components` | `sites/components` | `nx run components:build` | P2 | | `motion.recit.dev` | `recit-motion` | `sites/motion` | `nx run motion:build`. Les MP4 de la galerie sont prérendus en CI (GitHub Actions) et servis comme assets statiques, jamais rendus sur Vercel | P4 | | `report.recit.dev` | `recit-report` | `sites/report` | `nx run report:build`. Les PDF d'exemple sont générés en CI | P6 | | `webtoon.recit.dev` | `recit-webtoon` | `sites/webtoon` | `nx run webtoon:build`. Images optimisées au build | P7 | | `book.recit.dev` | `recit-book` | `sites/book` | `nx run book:build`. PDF et EPUB d'exemple générés en CI | P8 | | `roadmap.recit.dev` | `recit-roadmap` | `sites/roadmap` | `nx run roadmap:build`. ICS et RSS générés au build | P9 | | `calendar.recit.dev` | `recit-calendar` | `sites/calendar` | `nx run calendar:build`. Flux ICS abonnables servis en statique | P10 | | `story.recit.dev` | `recit-story` | `sites/story` | `nx run story:build`. Images d'export générées en CI | P11 | | `form.recit.dev` | `recit-form` | `sites/form` | `nx run form:build`. Statique, démo en mode `mock` seulement (accepté) | P13 | | `directory.recit.dev` | `recit-directory` | `sites/directory` | `nx run directory:build`. Aucun appel réseau au build (accepté) | P14 | | `maps.recit.dev` | `recit-maps` | `sites/maps` | `nx run maps:build`. SVG au build, PNG et MP4 d'exemple en CI (accepté) | P15 | | `ai.recit.dev` | `recit-ai` | `sites/ai` | `nx run ai:build`. Vidéos d'exemple rendues en CI (accepté) | P16 | - DNS chez le registrar de `recit.dev` : `CNAME` de chaque sous-domaine vers Vercel (`cname.vercel-dns.com`), apex `recit.dev` en `A`/`ALIAS` selon le registrar. Les alias (`www`, `deck`, `slides`, `video`, `toon`, `stories`, `agenda`, `events`, puis, acceptés le 24/10, `glossary`, `glossaire`, `annuaire`, `cartes`, `atlas`, `scenario`) sont déclarés comme domaines de redirection 301 dans le projet cible. - Chaque projet a un **Ignored Build Step** (`npx nx-ignore ` ou `nx show projects --affected`), pour ne reconstruire que les sites touchés. Prévisualisation par PR. - Pas de rendu lourd sur Vercel : Chrome, Remotion, Paged.js et sharp tournent en CI. Vercel ne sert que du statique (les sites sont prérendus). - **À décider** (`15-export-pdf.md`, question 8) : comment les fichiers générés en CI (PDF, EPUB, MP4, tranches, PNG) arrivent sur Vercel, par un déploiement « prebuilt » depuis GitHub Actions ou par un stockage statique séparé. C'est un prérequis pour qu'un PDF se télécharge sur report.recit.dev, webtoon.recit.dev ou book.recit.dev. Les fichiers et `exports.json` sont écrits dans le dossier de sortie du site (`dist/`), sans second build. - `recit.dev` est en `.dev`, donc HSTS préchargé et HTTPS obligatoire (certificats gérés par Vercel). - Le `vercel.json` du `docs/` d'upstream sert de modèle (en-têtes, redirections), un par site. ## 6. Actions - [ ] P0 : acheter `recit.dev`, créer l'équipe Vercel `recit`. - [ ] P2 : `packages/tools/site-kit`, puis `sites/docs` (contenu de `presentation-engine/docs/pages/documentation`, `components` et `theme`). - [ ] P2 : `sites/presentation` (contenu de `presentation-engine/docs/pages/demos` + galerie), puis `sites/www`. - [ ] P2 : DNS, projets Vercel `recit-www`, `recit-docs`, `recit-presentation`, redirections `www`, `deck`, `slides`. - [x] P4 : `sites/motion` (25/10 : hero, galerie, deck → vidéo, `/video`, e2e). - [ ] P4 : projet Vercel `recit-motion`, redirection `video.recit.dev` → `motion.recit.dev/video`, job CI qui rend les MP4 de `/video`. - [ ] P6 : `sites/report`, projet `recit-report`. - [ ] P7 : `sites/webtoon`, projet `recit-webtoon`, redirection `toon.recit.dev`. - [ ] P8 : `sites/book`, projet `recit-book`. - [ ] P9 : `sites/roadmap`, projet `recit-roadmap`. - [ ] P10 : `sites/calendar`, projet `recit-calendar`, redirections `agenda` et `events`. - [ ] P11 : `sites/story`, projet `recit-story`, redirection `stories`. - [ ] Accepté (24/10), P13 : `sites/form`, projet `recit-form` (`10-formulaires.md`). - [ ] Accepté (24/10), P14 : `sites/directory`, projet `recit-directory`, redirections `glossary`, `glossaire`, `annuaire` (`12-glossaire-annuaire.md`). - [ ] Accepté (24/10), P15 : `sites/maps`, projet `recit-maps`, redirections `cartes`, `atlas` (`13-cartes.md`). - [ ] Accepté (24/10), P16 : `sites/ai`, projet `recit-ai`, redirection `scenario` (`14-ia-scenario.md`). - [ ] Sur `recit.dev`, chaque format apparaît dès P2 avec son icône et son statut (« disponible », ou « P6 » … « P11 »). Le lien pointe vers son site dès l'ouverture.