Composants, images et médias · Documentation Specistry

Enrichissez vos pages avec des encadrés, des étapes, des images, des GIF animés et le bloc Media.

Composants, images et médias

0:00 / 0:20

Images

docs/quickstart.md

![La boîte reçoit son premier e-mail](./images/premier-email.gif)

PNG, JPEG, WebP ou GIF — vérifiés sur le contenu, jamais sur l’extension
2 Mio par fichier, 20 Mio par projet
Chemins relatifs à la page, obligatoirement sous docs/
Une image forme son propre bloc — jamais au milieu d’une phrase
Le texte alternatif doit décrire réellement l’image

Enregistrements et vidéo

Le lecteur n’intègre pas de lecteur vidéo. Pour une démonstration courte, utilisez un GIF animé comme image. Pour une présentation plus longue, utilisez Media sur la page d’accueil : une vignette avec bouton de lecture, une légende, une durée et un lien vers la version écrite.

docs/index.mdx

<Hero eyebrow="TestInbox · v1">
  <Action label="Commencer" href="./quickstart" />
  <Media
    poster="./images/demo.png"
    alt="Un test crée une boîte et l’e-mail arrive."
    caption="De create() à un test qui passe."
    duration="0:42"
    linkLabel="Voir en étapes"
    linkHref="./quickstart"
  />
</Hero>

NotePrévoyez toujours la version écrite

Le bouton de lecture est décoratif : la légende doit dire ce que montre le média, et linkHref pointer vers une page écrite équivalente.

Cas particuliers

Un SVG dans le contenu

CONTENT_ASSET_UNSUPPORTED

✕ ÉCHOUE

docs/archi.md

![Architecture](./images/archi.svg)

✓ CORRECTION

docs/archi.md

![Architecture](./images/archi.png)

Le SVG est accepté pour le logo, pas dans les pages.

GIF de plus de 2 Mio

CONTENT_ASSET_TOO_LARGE

✕ ÉCHOUE

docs/

images/demo.gif   6,4 Mo

✓ CORRECTION

docs/

# raccourcir à 12 s max, réduire couleurs et taille,
# ou utiliser <Media> avec une vignette sur l’accueil

Chaque image est limitée à 2 Mio.

Image au milieu d’une phrase

CONTENT_UNSUPPORTED

✕ ÉCHOUE

docs/x.md

Cliquez sur ![engrenage](./engrenage.png) pour ouvrir les réglages.

✓ CORRECTION

docs/x.md

Ouvrez **Réglages**.

![Le panneau des réglages](./reglages.png)

Les images sont uniquement des blocs.

Hero pas en premier

CONTENT_COMPONENT_NESTING_INVALID

✕ ÉCHOUE

docs/index.mdx

Bienvenue !

<Hero>…</Hero>

✓ CORRECTION

docs/index.mdx

<Hero>…</Hero>

Bienvenue !

`Hero` doit être le tout premier bloc de la page d’accueil.