Módulos de JavaScript

Todas las páginas de LUZ funcionan sin JavaScript. Los scripts añaden comportamiento: copiar, resaltar, un botón que alterna el modo de color, reproductores, pestañas y ordenación de tablas. El catálogo añade los suyos: búsqueda, aviso de cookies, la hora del día para el modo de color, una línea de tiempo y el seguimiento del desplazamiento de la barra lateral.

Cargarlo todo o un módulo

<script type="module" src="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.js"></script>

import { initTabs } from "@luz-ds/core/tabs";
initTabs();

• luz.js inicia todos los módulos al cargar la página.
• Importar un solo módulo no hace nada hasta que llamas a su función init.
• midi.js y table-sort.js son fragmentos independientes: luz.js carga cada uno cuando hace falta y solo en las páginas que lo necesitan.
• theme-mode.js es otro: luz.js lo carga solo en una página con un <luz-theme-mode>. Consulta Modo de color.
• La búsqueda del sitio está en @luz-ds/catalog: consulta Búsqueda. El aviso de cookies también está ahí, en un módulo propio que catalog.js no incluye: consulta Consentimiento de cookies. La hora del día para el modo de color es un tercer módulo del mismo tipo, theme-time.js, que catalog.js carga solo en páginas con un <luz-theme-time>: consulta Modo de color según la hora del día.
• La línea de tiempo y el seguimiento del desplazamiento de la barra lateral también están en @luz-ds/catalog, como timeline.js y sidebar.js. catalog.js carga el primero en páginas con <luz-timeline> y el segundo en páginas con .luz-sidebar, o con una lista marcada con data-luz-spy. Impórtalos por su nombre para una línea de tiempo o una barra lateral añadidas más tarde: @luz-ds/catalog/timeline y @luz-ds/catalog/sidebar.
• Una página que solo carga core no tiene seguimiento del desplazamiento. El cajón de la barra lateral es un popover nativo y funciona sin script.
• La línea de tiempo tiene un diccionario pequeño propio para sus cuatro botones (solo en y es), y después data-luz-label-* y el lang más cercano. Un idioma añadido con registerLocale() no le llega: llama a initTimeline(document, t) con la t de core.

Los módulos

Idiomas y textos que escriben los scripts

El inglés está en el punto de entrada. Cada uno de los demás idiomas que incluye LUZ es un archivo pequeño, que se carga al inicio en páginas cuyo <html lang> o cuyo lang fuera de un enlace o una opción lo indica; las páginas en inglés no hacen ninguna solicitud.

Con los módulos individuales, llama tú a loadLocales() y usa await loadLocales() antes de initHighlight() e initPlayers(). Si no se puede cargar un archivo, se muestra un único aviso en la consola y se usa el inglés.

Para un idioma que LUZ no incluya, establece una vez data-luz-label-* en <html> o <body>, o llama a registerLocale() antes de iniciar los scripts.

Para comprobar el archivo, añade un mapa de importación con una sección integrity antes del primer script de módulo, solo en las páginas de ese idioma. Un enlace modulepreload con integrity no es una protección en Safari ni Firefox: úsalo como mejora del rendimiento.

Añadir un idioma a LUZ requiere un pull request: el archivo JSON packages/core/src/i18n/<code>.json, una línea en el mapa files de i18n.js y una fila de presupuesto. Los pasos están en AGENTS.md.

Sin JavaScript

A qué recurre cada comportamiento cuando el script no se ejecuta: