Scripts personalizados

Usa CSS para dar estilo a los elementos HTML o agrega CSS y JavaScript personalizados para adaptar por completo el aspecto y la experiencia de tu documentación.

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseño, el espaciado, los colores y otras propiedades visuales. Algunas clases comunes son:

• w-full - Ancho completo
• aspect-video - Relación de aspecto 16:9
• rounded-xl - Esquinas redondeadas grandes
• block, hidden - Control de visualización
• dark:hidden, dark:block - Visibilidad en modo oscuro

Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores personalizados, usa la prop style.

<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

Mintlify incluye automáticamente cualquier archivo .css dentro de tu directorio de contenido en todas las páginas de tu sitio de documentación, del mismo modo que incluye los archivos .js personalizados. No necesitas importar ni referenciar el archivo desde docs.json ni desde tus archivos MDX.

Para añadir estilos personalizados, crea un archivo .css (por ejemplo, style.css) en cualquier nivel de tu directorio de contenido. Cualquier nombre de clase, selector de ID o selector de elemento que definas quedará disponible en todos tus archivos MDX.

Por ejemplo, define una clase en style.css:

.my-callout {
  border-radius: 1rem;
  background: #f0f9ff;
  padding: 1rem;
}

Luego úsala en cualquier archivo MDX con la prop className:

<div className="my-callout">
  Contenido aquí.
</div>

Puedes combinar nombres de clase personalizados con clases de Tailwind CSS en el mismo elemento.

El CSS personalizado se aplica a todas las páginas de tu sitio, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Para limitar los estilos a una página o sección específica, usa el selector de atributo html[data-current-path="..."] descrito en Atributos de datos.

Las referencias y el estilo de los elementos comunes están sujetos a cambios. Usa estilos personalizados con precaución, ya que pueden producirse cambios incompatibles en futuras actualizaciones.

Por ejemplo, puedes agregar el siguiente archivo style.css para personalizar los estilos de la barra de navegación y el pie de página.

#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

Mintlify expone dos tipos de hooks CSS para segmentación:

• Selectores de ID: elementos únicos a nivel de página que se apuntan con #value { } en CSS
• Selectores de elemento: elementos de componente y diseño que se apuntan con value { } en CSS (sin prefijo # o .)

Cada ID aparece una vez por página. Úsalos como #value en CSS. Por ejemplo, #navbar { background: red; }.

Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos como value en CSS. Por ejemplo, accordion { border: 1px solid red; }.

El JavaScript personalizado te permite agregar código ejecutable a nivel global. Es equivalente a insertar una etiqueta <script> con código JS en cada página.

Mintlify incluye cualquier archivo .js dentro de tu directorio de contenido en cada página de tu sitio de documentación, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Los archivos JavaScript personalizados se ejecutan después de que la página se vuelve interactiva. No puedes limitarlos a páginas específicas y, cuando hay varios archivos .js presentes, todos se ejecutan sin un orden garantizado.

Para cargar un script de terceros, inyecta un elemento <script> desde tu archivo JavaScript personalizado en lugar de agregar etiquetas <script src="..."> directamente en MDX:

const script = document.createElement('script');
script.src = 'https://example.com/widget.js';
script.async = true;
document.head.appendChild(script);

Por ejemplo, puedes agregar el archivo ga.js siguiente para habilitar Google Analytics en toda la documentación.

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');

Si tu sitio utiliza autenticación, los scripts personalizados pueden leer el usuario con sesión iniciada desde window.mintlify.user. Es el mismo objeto que se expone en las páginas MDX como la variable user, por lo que refleja el campo content de tus datos de usuario.

Como los scripts personalizados se ejecutan antes de que la información del usuario se resuelva, escucha el evento mintlify:user para reaccionar en cuanto el objeto de usuario esté disponible. El evento se dispara cuando la información del usuario se resuelve y también cada vez que cambia. Su detail es el objeto de usuario, o null cuando el visitante no ha iniciado sesión.

window.addEventListener('mintlify:user', (event) => {
  const user = event.detail;
  if (!user) return; // Signed out.

  renderAppLauncher(user);
});

Si el usuario ya se ha resuelto cuando se ejecuta tu script, lee window.mintlify.user directamente.

const user = window.mintlify?.user;
if (user) {
  renderAppLauncher(user);
}

window.mintlify.user es undefined hasta que la información del usuario se resuelva y también cuando el visitante no ha iniciado sesión. Utiliza el encadenamiento opcional al leer campos anidados.