# ZenithDocs

> Un moteur de documentation statique, léger et thémable, bâti sur Astro et Lumos.

Source: https://aymericchaverot.github.io/zenith-docs/fr/

ZenithDocs transforme un dossier de fichiers Markdown et MDX en un site de documentation rapide. Chaque page est prérendue en HTML et CSS, et le JavaScript n'est envoyé que pour les rares interactions qui en ont besoin.

```sh
npx github:AymericChaverot/zenith-docs create my-docs
```

<Cards>
  <Card title="Installation" href="/fr/installation/" icon="zap">
    Créez un site en une commande, ou ajoutez ZenithDocs à un projet Astro.
  </Card>
  <Card title="Rédaction" href="/fr/writing/markdown/" icon="file">
    Markdown, blocs de code et composants intégrés.
  </Card>
  <Card title="Thème" href="/fr/customization/theming/" icon="palette">
    Thèmes prêts à l'emploi, couleurs, polices et tokens CSS.
  </Card>
  <Card title="Référence" href="/fr/reference/" icon="book">
    Toutes les options de configuration et de frontmatter.
  </Card>
</Cards>

:::tip[Traduction partielle]
Seules cette page et l'installation sont traduites. Les autres restent accessibles en français : elles s'affichent en anglais, avec un bandeau qui le signale. C'est la démonstration du [repli de l'internationalisation](/fr/i18n/#untranslated-pages).
:::

## Pourquoi ZenithDocs ?

Les gros frameworks de documentation apportent beaucoup de fonctionnalités, et souvent beaucoup de JavaScript. ZenithDocs vise le même confort de rédaction, tout en livrant un site aussi léger qu'une page écrite à la main.

- **Statique par principe** : chaque page est du HTML. La sidebar, le sommaire, les accordéons et les arborescences de fichiers fonctionnent sans JavaScript.
- **Conventions familières** : les pages sont ordonnées par des fichiers `meta.json`, avec la même syntaxe que Fumadocs.
- **Thémable** : les styles reposent sur les tokens Lumos et les couches CSS, donc votre propre CSS l'emporte toujours.
- **Bâti sur Astro 7** : le Markdown passe par le pipeline Sätteri écrit en Rust, et le code est coloré au build par Shiki.

## Budget JavaScript

Chaque script est intégré à la page, donc aucun ne coûte de requête en plus. Les tailles sont mesurées sur ce site, compressées avec gzip.

| Fonctionnalité          | JavaScript                                                        | Taille  |
| ----------------------- | ----------------------------------------------------------------- | ------- |
| Menu mobile             | Aucun, grâce à l'API Popover                                      | 0       |
| Infobulle des versions  | Aucun, affichée au survol et au focus en CSS                      | 0       |
| Sidebar                 | Garde les dossiers ouverts et le défilement d'une page à l'autre  | 0,8 ko  |
| Thème sombre            | Applique le thème enregistré avant l'affichage, et le bouton      | 0,5 ko  |
| Bouton copier le code   | Un seul écouteur de clic pour tous les blocs                      | 0,3 ko  |
| Sommaire                | Met en valeur les sections visibles, sur les pages qui en ont un  | 1,1 ko  |
| Fenêtre de recherche    | Ouvre la fenêtre et affiche les résultats                         | 1,1 ko  |
| Onglets                 | Un composant web, seulement sur les pages qui en utilisent        | 0,9 ko  |
| Référence d'API         | Rien de plus que les onglets des réponses                         | 0       |
| Transitions de page     | Aucun : un fondu en CSS, et des liens préchargés par le navigateur | 0       |

Soit environ 4 ko sur une page sans onglets. La recherche est la seule fonctionnalité au coût réel, payé quand le lecteur l'ouvre : Pagefind et son worker, environ 25 ko, puis son module WebAssembly, environ 70 ko, et les morceaux de l'index utiles à la requête. Un lecteur qui ne cherche jamais n'en télécharge rien.

Pour le reste, la feuille de style pèse environ 12 ko, et les polices par défaut environ 140 ko pour les trois styles préchargés sur chaque page, plus 38 ko pour la police de code sur les pages qui en contiennent. Les navigateurs qui gèrent les speculation rules prérendent aussi une page quand le pointeur s'attarde sur son lien : le clic est instantané, au prix du téléchargement de cette page.