El panel de administración me molestó durante un tiempo. El sitio público por fin se veía como el mío, verde, la montaña, todo eso, y luego entraba al área de admin a escribir una entrada y era como entrar a una web completamente distinta. Panel genérico, nada del carácter, un corte visual duro entre mi sitio y la herramienta que uso para llevarlo. Quería que entrar en admin se sintiera como el mismo lugar, solo que con cosas distintas en la barra lateral.
La razón honesta por la que eran dos aspectos distintos es que los había construido como dos estructuras distintas. El layout público dibujaba la barra lateral, el fondo y el panel de lectura, y admin tiraba todo eso y dibujaba su propia versión simple. Así que el primer paso fue sacar la estructura a un componente que usaran ambos. Recibe los enlaces de navegación como una prop, y eso es básicamente lo único que los diferencia.
<!-- both public and admin render this now -->
<SiteShell {nav} {account} wide={isAdmin}>
{@render children()}
</SiteShell>El público pasa sus enlaces de Inicio, Etiquetas y Archivo, admin pasa Panel, Entradas, Comentarios y demás. Mismo fondo, mismos paneles esmerilados, mismo riel. Ahora lo único que cambia al cruzar a admin son los enlaces que hay en la barra lateral, que es exactamente lo que buscaba.
Una cosa con la que tuve cuidado. No quería soldar admin completamente al sitio público, porque en algún momento podría querer mover admin a algo más cerrado por razones de seguridad, su propio subdominio o su propio despliegue. Así que lo compartido es solo la apariencia. Admin sigue teniendo su propio grupo de rutas y su propio guardián de autenticación, ambos intactos. La estructura compartida es una envoltura visual tonta que no sabe ni le importa si está mostrando el sitio público o admin. La costura sigue ahí donde importa, solo que ahora es invisible.
Luego el editor. El editor de markdown es CodeMirror, y en realidad nunca lo había tematizado, así que se quedaba ahí con su aspecto claro por defecto sin importar qué hiciera el resto del sitio. En modo oscuro era una caja blanca brillante en medio de una página oscura. Nada bien. Le di un tema apropiado con los colores del sitio, pero mi primer intento solo elegía el tema una vez, al cargar:
// wrong: theme is set once and never follows the light/dark toggle
new EditorView({ extensions: [markdown(), myTheme] });Cambia el sitio a modo oscuro y el editor se quedaba tercamente claro. CodeMirror guarda su configuración dentro del estado del editor, así que no puedes simplemente reasignar una variable, tienes que darle una reconfiguración. El arreglo es poner el tema en un Compartment e intercambiarlo cada vez que cambia el tema del sitio:
const themeComp = new Compartment();
// ...extensions: [markdown(), themeComp.of(lightTheme)]
view.dispatch({ effects: themeComp.reconfigure(isDark ? darkTheme : lightTheme) });Ahora sigue el interruptor, editor oscuro en modo oscuro, y la superficie de escritura es sólida para que la montaña no se transparente a través de la propia caja de texto mientras escribo en ella. Que es lo que estoy haciendo, ahora mismo, para escribir esto.