La X en MDX

En todos ellos, primero extraemos algunos data de los hijos y luego lo representamos de una manera específica. Ten en cuenta que esto se ejecuta en cada representación. En la mayoría de los casos, no es un problema de rendimiento, pero si lo es, puedes moverlo a un complemento y ejecutar la transformación en tiempo de compilación.

Normalmente escribo contenido que tiene pasos, como tutoriales o cualquier tipo de guía donde se explica algo paso a paso. Markdown no tiene una sintaxis específica para iterar cosas en pasos, pero podemos usar MDX para extender Markdown e introducir nuestra propia sintaxis.

La implementación del componente Step que estamos utilizando aquí no importa, simplemente lo estamos utilizando para agrupar elementos. Si eres nuevo en MDX, esta puede no ser la mejor introducción. El caso de uso típico para MDX es incrustar componentes interactivos en Markdown, pero aquí estamos adoptando un enfoque diferente y usándolo más como una extensión de sintaxis para Markdown.

Ahora, basado en el archivo MDX que tiene pasos, podemos escribir otro componente envolvente. En este caso, en la propiedad children, obtenemos un elemento React para cada paso, por lo que podemos realizar un seguimiento del paso actual utilizando el estado de react y permitir que el usuario cambie el paso actual con un botón.

Ahora, quiero mostrar el mismo contenido, pero con un diseño diferente. Existe una técnica llamada desplazamiento con pegatinas. Es posible que la hayas visto en algunos sitios web. A medida que el usuario se desplaza hacia abajo, hay alguna parte del diseño que se mantiene en la pantalla, mientras que el resto se desplaza. Así que hagámoslo. Como esta es una masterclass, importaré el componente de diseño de desplazamiento con pegatinas. Compartiré el enlace al repositorio más adelante, si quieres ver cómo funciona. El componente de diseño de desplazamiento con pegatinas recibe dos propiedades, una para el lado izquierdo que se puede desplazar y otra para la parte adhesiva a la derecha. Cuando el usuario se desplaza a un nuevo paso, mostramos el elemento correspondiente de la lista de pegatinas.

Ahora, en lugar de mostrar el número de paso, agreguemos el contenido de la pegatina al archivo MDX. Supongamos que queremos mostrar algún código en esta parte adhesiva del diseño. No hay una sintaxis específica para esto, así que necesitamos crear nuestra propia convención. Por ejemplo, podemos colocar la parte adhesiva del paso como el primer elemento. Luego, realizando alguna transformación de matriz, obtenemos la lista de pasos y la lista de pegatinas y las pasamos al mismo componente de diseño. Entonces, cuando el usuario se desplaza, el código a la derecha debería cambiar en consecuencia. Solo por diversión, tengo un componente de terminal que anima entre transiciones de código, por lo que podemos usarlo para las pegatinas.

He estado experimentando con otro diseño para las masterclass. En lugar de cambiar los pasos utilizando el desplazamiento como en este ejemplo, podemos sincronizar estos pasos con algún medio como un video o un audio, tal vez un podcast, y cambiar los pasos a medida que avanza el medio. Para hacer eso en el archivo mdx, necesitamos especificar el archivo de medios y el rango de tiempo para cada paso. Una vez que tengamos eso, podemos extraer la información de los hijos en el componente envolvente y pasarla a otro componente React. Esta vez es el componente TalkLayout el que resolverá toda la sincronización por nosotros. Y deberías ver los pasos cambiando cada vez que chasqueo los dedos.

Algunos de ustedes pueden haber notado que esto se parece al diseño de esta masterclass que estoy dando en este momento. Y lo es. Esta charla se construyó utilizando la misma técnica. Todo es MDX. Por ejemplo, aquí a la izquierda puedes ver el código de los pasos que estás viendo actualmente. Y aquí está el siguiente paso.

Y eso es todo lo que tengo. Las conclusiones. Puedes usar MDX para construir tu propio dialecto adaptado para cualquier diseño específico. Aquí te dejo los enlaces al repositorio de la charla. No las diapositivas, sino la charla en sí. Ejecutas Yarn dev y puedes ver esta charla nuevamente.

Y aquí está mi Twitter y los componentes que usamos. La mayoría de ellos provienen de un nuevo proyecto en el que estoy trabajando. Se llama Codehike. Y se enfoca en herramientas de pared de código. Y herramientas para facilitar la explicación del código. Gracias.