API: enlaces y estados

Cómo se abre una página en una versión de Moodle, modo de color y tema dados, y cómo enlazar a una sección o a un ejemplo.

Cualquier página del sitio se puede abrir en el estado que quieras mostrar, con parámetros en la dirección. La documentación de un plugin puede entonces mostrar un componente como lo vería un sitio concreto: Moodle 4.5, colores oscuros, con el tema de Didactika.

Los parámetros

Sin parámetros, la página se abre con lo que la persona eligió la última vez (las elecciones se recuerdan en su navegador) o con los valores por defecto: Moodle 5.3, el modo de color del sistema, el tema apagado.

https://moodle-design.didactika.org/es/bootstrap/buttons/?version=v45&mode=light&brand=1&theme=0.1

Idioma

El idioma forma parte de la ruta: /en/… y /es/…. Cada página existe en ambos, con el mismo identificador, así que un enlace se construye cambiando el primer segmento.

Secciones y ejemplos

Cada encabezado tiene un ancla (el id que Astro hace con su texto), así que un enlace puede caer en la sección exacta:

https://moodle-design.didactika.org/es/bootstrap/tables/#cabeceras-ordenables

El ancla es el encabezado en minúsculas, sin acentos, con guiones. Los encabezados no se renombran a la ligera, pero si necesitas un enlace que nunca cambie, enlaza a la página y nombra la sección en el texto.

Enlazar a un componente en una versión de Moodle, desde una incidencia

Un informe que dice “el paginador se ve mal en 4.1” es mejor como enlace que como captura:

…/es/bootstrap/pagination/?version=v41#la-paginación-de-una-lista

Construir los enlaces en código

const root = 'https://moodle-design.didactika.org';

const link = (id, {lang = 'es', version, mode, brand, hash = ''} = {}) => {
    const params = new URLSearchParams();
    if (version) { params.set('version', version); }
    if (mode) { params.set('mode', mode); }
    if (brand !== undefined) { params.set('brand', brand ? '1' : '0'); }
    const query = params.toString();
    return `${root}/${lang}/${id}/${query ? '?' + query : ''}${hash}`;
};

link('bootstrap/buttons', {version: 'v45', mode: 'light', brand: true});

Lo que un enlace nunca hace

• Nunca cambia los datos del sitio: los estados son solo para mirar.
• Nunca necesita que la persona haya iniciado sesión.
• Los valores desconocidos se ignoran y se usa el de por defecto.