​

Guide de style de la documentation

​

Style de production pour Mintlify

​

Cadre : Propriétés CSS (variables CSS)

​

Architecture du thème

• ❌ Objets de thème JavaScript (ThemeData, themeStyles.jsx) - DÉPRÉCIÉ
• ❌ Objets de style en ligne avec des couleurs codées en dur
• ❌ Switch de thème basé sur JavaScript

• ✅ Propriétés CSS personnalisées (--variable-name）
• ✅ Variables CSS globales dans style.css
• ✅ Mintlify configuration de thème dans docs.json

​

Système de couleurs

​

Utilisation des propriétés CSS personnalisées

​

Styles en ligne (Recommandé)

<div style={{ 
  color: "var(--accent)", 
  border: "1px solid var(--border)",
  background: "var(--card-background)"
}}>
  Content
</div>

​

CSS au niveau du composant

export const MyComponent = () => {
  return (
    <>
      <div className="my-component">
        Content
      </div>
      <style>{`
        .my-component {
          color: var(--text);
          background: var(--card-background);
          border: 1px solid var(--border);
        }
      `}</style>
    </>
  );
};

​

CSS global dans style.css

.my-custom-class {
  color: var(--accent);
  background: var(--card-background);
}

​

Comment fonctionne le changement de thème

:root {
  --accent: #3CB540; /* Light mode */
}

.dark {
  --accent: #2b9a66; /* Dark mode */
}

​

Règles de couleur

​

Approches obsolètes

1. Objet ThemeData - snippets/styles/themeStyles.jsx est DÉPRÉCIÉ
   Copier

   Demander à l'IA

   // ❌ WRONG - DO NOT USE
   import { ThemeData } from "/snippets/styles/themeStyles.jsx";
   <div style={{ color: ThemeData.light.accent }}>Content</div>
   
2. Couleurs codées en dur - Ne jamais coder en dur des valeurs hexadécimales qui doivent s’adapter au thème
   Copier

   Demander à l'IA

   // ❌ WRONG - DO NOT USE
   <div style={{ color: "#3CB540" }}>Content</div>
   
3. Changement de thème en JavaScript - Pas nécessaire, le CSS le gère automatiquement

​

Ce qu’il ne faut pas faire

• ❌ Ne pas importer ou utiliserThemeData de themeStyles.jsx
• ❌ Ne pas coder en dur les couleurs hexadécimales qui doivent s’adapter au thème
• ❌ Ne pas utiliser des gris génériques sans vérifier la compatibilité avec le thème
• ❌ Ne pas créer des couleurs sémantiques (notions de confiance, états d’erreur) dépendantes du thème
• ❌ Ne pas remplacer le texte blanc sur les arrières-plan colorés intentionnellement
• ❌ Ne pas créer d’objets de thème JavaScript personnalisés

​

Architecture du framework de mise en forme

​

Couches du framework

​

Couche 1 : CSS global (style.css)

• ✅ Propriétés CSS personnalisées (variables de thème)
• ✅ Mintlify substitutions de composants (navigation, pied de page, etc.)
• ✅ Classes du conteneur en mode Frame
• ✅ Classes utilitaires pour les motifs utilisés 5 fois ou plus sur les pages

• ❌ Styles spécifiques à la page
• ❌ Styles spécifiques au composant (à placer dans JSX)
• ❌ Styles uniques nécessaires

/* ============================================
   THEME VARIABLES (CSS Custom Properties)
   ============================================ */
:root { /* Light mode */ }
.dark { /* Dark mode */ }

/* ============================================
   FRAMEWORK OVERRIDES (Mintlify-specific)
   ============================================ */
/* Navigation, footer, frame mode containers */

/* ============================================
   UTILITY CLASSES (Reusable patterns)
   ============================================ */
/* Only for patterns used 5+ times across pages */

​

Couche 2 : Composants JSX (snippets/components/**/*.jsx)

• ✅ Utilisez les propriétés CSS personnalisées (var(--accent), var(--text), etc.)
• ✅ Les styles doivent être dans le fichier du composant
• ✅ Utilisez des balises<style> pour un style complexe (classes pseudo, requêtes multimédias)
• ✅ Utiliser des objets de style en ligne pour un style simple
• ❌ Importer des fichiers CSS externes
• ❌ Utiliser des couleurs de thème codées en dur (utiliser des variables CSS)
• ❌ Utiliser className sans balise correspondante <style>tag

export const MyComponent = () => {
  return (
    <div style={{
      color: "var(--text)",
      backgroundColor: "var(--card-background)",
      border: "1px solid var(--border)",
      padding: "1rem"
    }}>
      Content
    </div>
  );
};

export const MyComponent = () => {
  return (
    <>
      <div className="my-component">
        Content
      </div>
      <style>{`
        .my-component {
          color: var(--text);
          background: var(--card-background);
        }
        .my-component:hover {
          border-color: var(--accent);
        }
      `}</style>
    </>
  );
};

export const MyComponent = ({ variant = "default" }) => {
  const baseStyle = {
    color: "var(--text)",
    padding: "1rem"
  };
  
  const variantStyles = {
    default: { border: "1px solid var(--border)" },
    accent: { border: "1px solid var(--accent)" }
  };
  
  return (
    <div style={{ ...baseStyle, ...variantStyles[variant] }}>
      Content
    </div>
  );
};

​

Couche 3 : Fichiers MDX (v2/pages/**/*.mdx)

• ✅ Utiliser les primitives de composants pour tous les besoins de mise en forme
• ✅ Utiliser les composants globaux Mintlify (Card, Tabs, Steps, etc.)
• ✅ Importer des composants personnalisés depuis /snippets/components/
• ❌ Aucun attribut en ligne style={{}}attributs
• ❌ Aucune couleur codée en dur
• ❌ Aucun attribut “custom”classNameattributs

<div style={{ display: "flex", gap: "1rem" }}>
  <Card>Content 1</Card>
  <Card>Content 2</Card>
</div>

import { FlexContainer } from '/snippets/components/primitives/layout.jsx';

<FlexContainer gap="1rem">
  <Card>Content 1</Card>
  <Card>Content 2</Card>
</FlexContainer>

​

Arbre de décision : Dans quelle catégorie cette forme se situe-t-elle ?

1. Est-ce une couleur de thème ? → Ajouter à style.css en propriété CSS personnalisée
2. Est-il utilisé dans un composant ? → Placer dans un fichier de composant JSX (en ligne ou <style> balise )
3. Est-il nécessaire en MDX ? → Créer/utiliser une primitive de composant
4. Est-il utilisé 5+ fois à l’échelle mondiale ? → Ajouter une classe d’utilité à style.css
5. Est-ce spécifique à la page ? → Créer une primitive de composant (ne pas placer dans “style.css）

​

Bibliothèque de composants primitifs

• Disposition: FlexContainer, GridContainer, Spacer
• Tableaux: StyledTable, TableRow, TableCell
• Conteneurs: BorderedBox, CenteredContainer, FullWidthContainer

​

Typographie

​

Titres

import { H1, H2, PageHeader } from "/snippets/components/display/frameMode.jsx";

<PageHeader>Main Title</PageHeader>
<H1>Section Title</H1>
<H2>Subsection Title</H2>

​

Stylisation du texte

• Utilisez gras (**text**) pour l’accentuation
• Utilisez italique (*text*) de manière mesurée
• Utilisez code (backticks) pour le code inline
• Utilisez les blocs de code pour le code multilignes

​

Expressions mathématiques

​

Mathématiques en ligne

The voting power is calculated as $V_i = \frac{B_i}{B_T}$ where $B_i$ is bonded stake.

​

Équations de bloc

$$
R_t = S_t \cdot r_t
$$

​

Syntaxe LaTeX courante

​

Critique : Ne PAS utiliser les délimiteurs en barre oblique inversée

{/* ❌ WRONG - backslash delimiters break MDX */}
\(B_i\) for inline math
\[R_t = S_t \cdot r_t\] for block math

{/* ✅ CORRECT - dollar sign delimiters */}
$B_i$ for inline math
$$R_t = S_t \cdot r_t$$ for block math

​

Configuration LaTeX

​

Espacement et disposition

​

Espacement cohérent

• Utilisez un espacement cohérent entre les sections
• Regrouper le contenu lié
• Utiliser des séparateurs (<CustomDivider />) pour séparer les sections majeures

​

Dispositions de page

• Portails - Utiliser CardGroups pour les points d’entrée clés
• Guides - Utilisez les étapes pour les instructions séquentielles
• Références - Utilisez des tables ou des onglets pour des données organisées
• Démarrages rapides - Utilisez des onglets pour différents chemins (OS, sur chaîne/hors chaîne)

​

Utilisation des composants

​

Quand utiliser les composants

• Onglets - Séparer le contenu par contexte (OS, type de workflow, type d’utilisateur)
• Vues - Afficher du contenu différent en fonction du système d’exploitation ou du chemin de l’utilisateur
• Étapes - Instructions séquentielles pour les processus
• Groupes de cartes - Groupements visuels pour les portails, les hubs et le contenu lié
• Accordeons - Sections expansibles pour des informations détaillées
• Appels d’attention - Notes importantes, astuces, avertissements et boîtes d’information

​

Types d’appels d’attention

• <Info> - Informations générales et conseils
• <Tip> - Conseils utiles
• <Warning> - Avertissements importants
• <Danger> - Avertissements critiques
• <Note> - Contexte supplémentaire

​

Préférer les composants personnalisés pour les liens et la navigation

• Liens: Utilisez “<GotoLink> et “<GotoCard> au lieu de liens markdown simples ou Mintlify <Card> avec href
• Citations: Utiliser <Quote> et <FrameQuote> au lieu de blocs de citation classiques
• Cartes: Utilisez “<GotoCard> pour les cartes de navigation avec un style amélioré
• Appels: Utilisez “<CustomCallout> et “<TipWithArrow>” pour des appels visuels améliorés
• Liens externes: Utilisez “<DoubleIconLink> pour les liens externes (GitHub, etc.)

{/* ❌ Plain markdown link */}
[Getting Started](/get-started)

{/* ✅ Custom component with better styling */}
import { GotoLink } from '/snippets/components/primitives/links.jsx';
<GotoLink label="Getting Started" relativePath="/get-started" icon="arrow-right" />

{/* ❌ Plain blockquote */}
> This is a quote

{/* ✅ Custom quote component with attribution */}
import { FrameQuote } from '/snippets/components/display/quote.jsx';
<FrameQuote author="John Doe" source="Livepeer Blog" href="https://livepeer.org/blog">
  This is a quote with better visual design.
</FrameQuote>

{/* ❌ Basic Mintlify Card with href */}
<Card title="API Reference" href="/api/reference">
  API documentation
</Card>

{/* ✅ Custom GotoCard with enhanced styling */}
import { GotoCard } from '/snippets/components/primitives/links.jsx';
<GotoCard
  label="API Reference"
  relativePath="/api/reference"
  icon="book"
  text="Complete API documentation with examples"
  cta="View Docs"
/>

• Liens en ligne au sein des paragraphes (les liens markdown sont acceptables)
• Liens dans les exemples de code ou les références techniques
• Liens qui n’ont pas besoin d’emphasis visuelle

​

Mintlify Remplacements et bonnes pratiques

​

Remplacement : « Utiliser les classes Tailwind »

{/* ❌ Don't use Tailwind */}
<div className="flex gap-4 items-center">
  <Card>Content</Card>
</div>

{/* ✅ Use component primitives */}
<FlexContainer gap="1rem" align="center">
  <Card>Content</Card>
</FlexContainer>

​

Remplacer : « Les styles en ligne sont acceptables pour des corrections rapides »

{/* ❌ Don't use inline styles in MDX */}
<div style={{ display: "flex", gap: "1rem" }}>
  <Card>Content</Card>
</div>

{/* ✅ Use component primitives */}
<FlexContainer gap="1rem">
  <Card>Content</Card>
</FlexContainer>

​

Remplacer : “Utiliser le CSS global pour tout”

• ✅ Variables de thème (Propriétés CSS personnalisées)
• ✅ Mintlify composant de substitution (navigation, pied de page)
• ✅ Classes du mode cadre
• ✅ Classes utilitaires utilisées 5 fois ou plus de manière globale

• ❌ Styles spécifiques au composant (à placer dans JSX)
• ❌ Styles spécifiques à la page (créer des primitives de composants)
• ❌ Besoins de style uniques (créer des primitives de composants)

​

Remplacer : « Les styles des composants peuvent être externes »

{/* ✅ Styles within component */}
export const MyComponent = () => {
  return (
    <>
      <div className="my-component">Content</div>
      <style>{`
        .my-component {
          color: var(--text);
        }
      `}</style>
    </>
  );
};

​

Mintlify Pièges et limites

​

Limites critiques

​

1. Les chemins d’importation doivent être absolus

// ✅ Correct - absolute path from repo root
import { MyComponent } from '/snippets/components/MyComponent.jsx';

// ❌ Wrong - relative paths don't work
import { MyComponent } from '../components/MyComponent.jsx';

​

2. Les extensions de fichier sont requises

// ✅ Include extension
import { Component } from '/snippets/Component.jsx';

// ❌ May not resolve
import { Component } from '/snippets/Component';

​

3. Ne peut pas importer dans les fichiers de composant

// ❌ WRONG - This will fail
// snippets/components/MyComponent.jsx
import { themeColor } from '/snippets/styles/themeStyles.jsx';

export const MyComponent = () => {
  return <div style={{ color: themeColor.light.accent }}>Hello</div>;
};

// ✅ CORRECT
// MyPage.mdx
import { MyComponent } from '/snippets/components/MyComponent.jsx';
import { ThemeData } from '/snippets/styles/themeStyles.jsx';

<MyComponent />
// MyComponent can access ThemeData from parent scope

​

4. Les fichiers JSX ne peuvent pas importer d’autres fichiers JSX

​

5. Héritage de la portée MDX

• ✅ Le MDX enfant hérite de la portée parente pour les props - Les imports du parent fonctionnent lorsqu’ils sont utilisés en tant que props de composant
• ❌ Le MDX enfant ne peut PAS hériter de la portée du parent pour l’interpolation JSX directe - Variables utilisées comme “{variable} peuvent avoir besoin d’être réimportées
• ✅ L’enfant peut importer ses propres variables - Si l’enfant a besoin de quelque chose que le parent n’importe pas

// Parent.mdx
import { DOCKER_CODE } from '/snippets/data/gateways/code.jsx'
import ChildView from '/snippets/pages/ChildView.mdx'

<ChildView />

// ChildView.mdx
{/* Can use DOCKER_CODE as props */}
<CustomCodeBlock {...DOCKER_CODE.install} />  {/* ✅ Works */}

{/* But direct interpolation may need re-import */}
<Badge>{latestVersion}</Badge>  {/* ❌ May need import */}

​

6. Les hooks React sont globaux

// ✅ Works - hooks available without import
export function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => { /* ... */ }, []);
  return <div>{count}</div>;
}

// ❌ Not needed - will cause errors
import React, { useState, useEffect } from 'react';

​

7. Comportement du composant d’icône

// ❌ This will NOT work - color styling has no effect
<span style={{ color: "#3CB540" }}>
  <Icon icon="/path/to/icon.svg" size={20} />
</span>

​

8. Mintlify Composants globaux

• React, Frame, Card, Icon, Steps, Step, Tabs, Tab
• Note, Warning, Info, Tip, Danger
• Accordion, Columns, CardGroup, CodeBlock, Expandable, Badge, Tooltip

// ✅ Correct - use directly
<Card title="Title">Content</Card>
<Tabs>
  <Tab title="Tab 1">Content</Tab>
</Tabs>

// ❌ Wrong - don't import
import { Card, Tabs } from "@mintlify/components";

// ❌ WRONG - Will cause "ReferenceError: Expandable is not defined"
const componentMap = {
  expandable: Expandable,
  accordion: Accordion
};
const Component = componentMap[component];

// ✅ CORRECT - Use conditional rendering with direct JSX
if (component === "expandable") {
  return <Expandable {...props}>{content}</Expandable>;
}
return <Accordion {...props}>{content}</Accordion>;

​

9. Les commentaires JSX n’empêchent pas l’analyse MDX

{/* ❌ WRONG - MDX will still try to parse CustomCodeBlock */}
{/* 
<CustomCodeBlock codeString="test" />
*/}

{/* ✅ CORRECT - Remove the entire section, don't comment it */}
{/* Code components temporarily unavailable - see component-bugs.md */}

1. Supprimez l’ensemble de la section du fichier MDX
2. Ajoutez un commentaire expliquant pourquoi il a été supprimé
3. **Document dans docs/PLAN/errors/component-bugs.md**si c’est un bug de composant
4. Ne pas utiliser les commentaires JSX pour “commenter” l’utilisation du composant

​

9. Limitations du mode Frame

• Les titres markdown par défaut peuvent ne pas s’afficher correctement
• Utilisez les composants de titre personnalisés de frameMode.jsx
• Tous les styles doivent être personnalisés
• Mintlify les composants fonctionnent toujours mais perdent les styles par défaut
• Conservez les primitives de mise en page réactive dans style.css (.frame-mode-container, .frame-mode-hero-full, pagination des cadres)
• Conserve la structure spécifique à la page dans les composants JSX partagés (par exemple /snippets/components/domain/SHARED/Portals.jsx)
• N’utilisez pas directement des constantes de déblocage fixes dans les styles des composants (par exemple, une valeur codée en dur 96px, 20px, ou des largeurs fixes %)}
• Préférez les variables CSS + les points de cassure pour le mode de disposition du cadre, et les propriétés CSS personnalisées (var(--...)) pour le thème

​

Importer des modèles

​

Schéma correct : importer en MDX, utiliser dans un composant

// ✅ MyPage.mdx
import { MyComponent } from '/snippets/components/MyComponent.jsx';
import { DOCKER_CODE } from '/snippets/data/gateways/code.jsx';

<MyComponent />

// ✅ MyComponent.jsx - uses CSS Custom Properties (production-grade)
export const MyComponent = () => {
  return (
    <div style={{ color: "var(--accent)" }}>
      <CustomCodeBlock {...DOCKER_CODE.install} />
    </div>
  );
};

​

Flux de travail Git

​

Gestion des branches

git checkout docs-v2
git pull
git checkout -b docs-plan/XX-task-name

• docs-v2 (branche de docs active)
• main ou master
• Toute branche utilisée par un autre agent

​

Bonnes pratiques

​

Organisation du code

1. Gardez les composants dans /snippets/components/ organisés par objectif :
   • primitives/ - Éléments d’interface utilisateur de base
   • layout/ - Composants de mise en page
   • display/ - Média et intégrations
   • content/ - Affichage du contenu
   • integrations/ - Services externes
   • domain/ - Composants spécifiques au domaine
2. Conservez les données dans/snippets/data/ pour les chaînes de code et variables réutilisables
3. Utilisez /snippets/pages/ pour le contenu MDX modulaire qui est importé dans les pages principales

​

Style d’écriture

1. Soyez clair et concis - Écrivez pour des utilisateurs ayant des niveaux techniques variés
2. Utilisez des exemples - Inclure des exemples de code et des scénarios du monde réel
3. Fournir un contexte - Expliquer pourquoi, et non pas seulement comment
4. Lien Contenu Connexe - Aider les utilisateurs à découvrir des informations connexes
5. Testez les Deux Thèmes - Vérifier que le contenu a bonne allure en mode clair et en mode sombre

​

Guidelines des composants

1. Utiliser UNIQUEMENT les propriétés CSS personnalisées - Ne jamais utiliser ThemeData ou coder en dur les couleurs
2. Variables de référence depuis style.css - Toutes les couleurs du thème sont dans style.css en variables CSS
3. Composants de test - Vérifier que les composants s’affichent correctement
4. Gérer les enfants correctement - Traiter toujours les enfants comme des tableaux lors de la mise en carte
5. Propriétés du document - Inclure les commentaires JSDoc pour les props des composants
6. Fournir des exemples - Ajouter des exemples dans le examples/dossier pour chaque composant

​

Immutabilité des composants

• Création de nouveaux composants
• Modification des fichiers MDX qui utilisent des composants
• Corriger les imports MDX et leur utilisation

• Modifier les fichiers de composants existants
• Modification des signatures de fonctions de composant
• Ajout/suppression des exports de composant
• Modification de la logique du composant

1. Commentez la section du composant dans le fichier MDX où il est utilisé
2. Vérifiez que la page s’affiche sans cette section
3. Si la page s’affiche correctement → Le composant est le problème
4. Documenter l’erreur dans docs/PLAN/errors/component-bugs.md avec :
   • Nom du composant et chemin du fichier
   • Message d’erreur depuis la console
   • Page où l’erreur se produit
   • Vérification que le fait de commenter le code répare la page
   • Recommandation pour la correction du composant (mais ne pas l’implémenter)

​

Nom des fichiers

• Utilisez le kebab-case pour les noms de fichiers : my-component.mdx
• Utilisez PascalCase pour les noms des composants : MyComponent
• Utilisez des noms descriptifs qui indiquent la fonction

​

Liste de vérification des tests

• Le contenu s’affiche correctement en mode sombre (par défaut)
• Le contenu s’affiche correctement en mode clair
• Tous les liens fonctionnent et pointent vers les bonnes pages
• Les exemples de code sont précis et testés
• Les images s’affichent et ont un texte alternatif approprié
• Les composants utilisent des couleurs adaptées au thème
• Aucune couleur codée en dur qui devrait s’adapter au thème
• Les composants s’affichent correctement
• Aucune erreur de console dans les outils de développement du navigateur
• Erreurs de syntaxe MDX vérifiées et corrigées
• Toutes les pages vérifiées dans un navigateur sans tête (voir les exigences de vérification ci-dessous)

​

Exigences de vérification

​

Vérification de la syntaxe MDX

1. Utilisez des outils de linting pour vérifier tous les fichiers MDX modifiés
2. Vérifiez les:
   • Balises JSX non fermées
   • Syntax d’import non valide
   • Frontmatter manquant
   • Erreurs de syntaxe
3. Corrigez les erreurs MDX avant de considérer le travail comme terminé

​

Vérification avec un navigateur headless

1. Utilisez Puppeteer ou un outil similaire pour charger chaque page
2. Attendez que le réseau soit inactif
3. Vérifiez les erreurs de la console (en filtrant les artefacts du script de test)
4. Vérifier la longueur du contenu > 500 caractères
5. Vérifier l’existence d’un élément H1
6. Rechercher des erreurs 404

• Ignorer « require is not defined » des scripts de test
• Ignorer les erreurs liées à « puppeteer »
• Ignorez les erreurs “fs a déjà été déclaré”
• Concentrez-vous sur les erreurs réelles des composants

• URL de la page
• Longueur du contenu
• Texte H1
• Liste des erreurs de console réelles (le cas échéant)
• Statut : ✅ OK ou ❌ ERREURS

​

Vérification de la structure de l’URL

• Page path in docs.json: v2/resources/documentation-guide/component-library/primitives
• URL : /v2/resources/documentation-guide/component-library/primitives

​

Mintlify Configuration du thème

{
  "theme": "palm",
  "colors": {
    "primary": "#3CB540",
    "light": "#2b9a66",
    "dark": "#3CB540"
  }
}

​

Hooks de pré-validation

​

Ce qui est vérifié

• Déprécié ThemeData Utilisation - Bloque les importations de ThemeData de snippets/styles/themeStyles.jsx
• Couleurs de thème codées en dur - Avertit sur les codes hexadécimaux directes qui devraient utiliser les propriétés CSS personnalisées
• Importations de morceaux relatifs - Importations de drapeaux depuissnippets/ qui utilisent des chemins relatifs au lieu de chemins absolus
• Imports inutiles - Avertit sur les importations explicites pour les composants disponibles globalement de Mintlify et les hooks React
• Validation de la syntaxe - Vérifie la syntaxe MDX, JSON, Shell et JavaScript
• Validation du navigateur - Teste que les pages MDX se rendent correctement dans un navigateur sans tête (si mint devest en cours)

​

Installation

./.githooks/install.sh

​

Ce qui se passe en cas de violation

1. Le commit est bloqué
2. Vous recevez un message d’erreur détaillé listant toutes les violations
3. Vous devez corriger les violations avant de valider à nouveau

​

Modifications protégées.allowlist (Humain-seulement)

git commit -m "Update .allowlist" --trailer "allowlist-edit=true"

git commit -m "Remove obsolete files" --trailer "allow-deletions=true"

​

Sortie d’erreur exemple

╔═══════════════════════════════════════════════════════════════╗
║  STYLE GUIDE VIOLATIONS DETECTED - COMMIT BLOCKED           ║
╚═══════════════════════════════════════════════════════════════╝

Found 2 violation(s):

❌ my-component.jsx: Uses deprecated ThemeData - use CSS Custom Properties instead
⚠️  my-page.mdx: Contains hardcoded theme colors - use CSS Custom Properties (var(--accent), etc.)

📖 MANDATORY: Read the Style Guide before committing:
   v2/resources/documentation-guide/style-guide.mdx

​

Validation du navigateur

• Erreurs d’exécution dans les composants
• Imports échoués
• Erreurs de console
• Échecs d’affichage

​

Ensemble de tests complet

​

Exécution des tests

# Run all tests
npm test

# Run specific test suites
npm run test:style      # Style guide validation
npm run test:mdx        # MDX syntax validation
npm run test:spell      # UK English spelling
npm run test:quality    # Quality checks (alt text, links, frontmatter)
npm run test:browser    # Browser rendering tests

​

Ce qui est testé

• Utilisation des propriétés CSS personnalisées (pas de ThemeData, pas de couleurs codées en dur)
• Aucun style inline dans les fichiers MDX
• Aucune classe Tailwind
• Chemins d’importation absolus
• Conventions de nommage des fichiers
• Avertissements sur l’immutabilité des composants

• Validation du frontmatter
• Balises JSX non fermées
• Syntaxe d’import invalide
• Problèmes d’héritage de la portée MDX

• Validation de l’orthographe en anglais britannique
• Dictionnaire personnalisé pour les termes techniques (Livepeer, Arbitrum, etc.)
• Exclut les blocs de code et le frontmatter

• Présence du texte alternatif de l’image
• Complétude du frontmatter
• Validation des liens internes
• Validation des métadonnées SEO

• Rendu de la page dans un navigateur sans tête
• Détection d’erreurs de console
• Test de thème (clair/notre)
• Validation du contenu (H1, longueur du contenu)

​

Ressources

• Bibliothèque de composants - Référence complète du composant
• Mintlify Documentation - Docs officielles Mintlify
• Mintlify Guide de comportement - Pièges Mintlify complets
• Documentation des hooks Git - Compléter la documentation du hook pre-commit
• style.css - Propriétés CSS globales pour le thème

​

Étapes suivantes

• Revoyez la Bibliothèque de composants pour les composants disponibles
• Vérifiez Inventaire des extraits pour tous les extraits disponibles
• Lisez Mintlify Guide des comportements pour des détails sur les pièges
• Voir Contribuer aux Docs pour les directives de contribution
• Installer des hooks Git: ./.githooks/install.sh