Admin-panelet plaget meg en stund. Den offentlige siden så endelig ut som min, grønn, fjellet, det hele, og så klikket jeg meg inn i admin-området for å skrive et innlegg, og det var som å gå inn på en helt annen nettside. Generisk dashbord, ingen av karakteren, et hardt visuelt skille mellom siden min og verktøyet jeg bruker for å drive siden min. Jeg ville at det å gå inn i admin skulle føles som det samme stedet, bare med andre ting i sidefeltet.
Den ærlige grunnen til at det var to forskjellige looks er at jeg hadde bygget dem som to forskjellige skall. Det offentlige layoutet tegnet sidefeltet og bakgrunnen og lesepanelet, og admin kastet alt det og tegnet sin egen enkle versjon. Så steg én var å trekke skallet ut i én komponent som begge bruker. Den tar navigasjonslenkene som en prop, og det er stort sett det eneste som skiller dem.
<!-- both public and admin render this now -->
<SiteShell {nav} {account} wide={isAdmin}>
{@render children()}
</SiteShell>Den offentlige siden sender inn sine Hjem-, Tags- og Arkiv-lenker, admin sender inn Dashbord, Innlegg, Kommentarer og så videre. Samme bakgrunn, samme frostede paneler, samme skinne. Nå er det eneste som endrer seg når du krysser inn i admin hvilke lenker som er i sidefeltet, som er akkurat det jeg var ute etter.
Én ting jeg var forsiktig med. Jeg ville ikke sveise admin helt fast på den offentlige siden, fordi jeg på et tidspunkt kanskje vil flytte admin til noe mer låst av sikkerhetsgrunner, sitt eget subdomene eller sin egen deploy. Så det delte stykket er bare utseendet. Admin har fortsatt sin egen rutegruppe og sin egen auth-vakt, begge urørte. Det delte skallet er en dum visuell innpakning som verken vet eller bryr seg om den viser den offentlige siden eller admin. Skillet er fortsatt der der det betyr noe, det er bare usynlig nå.
Så editoren. Markdown-editoren er CodeMirror, og jeg hadde faktisk aldri temaet den, så den satt der i sitt lyse standardutseende uansett hva resten av siden gjorde. I mørk modus var den en lys hvit boks midt i en mørk side. Ikke bra. Ga den et skikkelig tema i sidens farger, men mitt første forsøk valgte bare temaet én gang, når det lastet:
// wrong: theme is set once and never follows the light/dark toggle
new EditorView({ extensions: [markdown(), myTheme] });Bytt siden til mørk modus og editoren forble stivt lys. CodeMirror holder konfigurasjonen sin inne i editor-tilstanden, så du kan ikke bare tilordne en variabel på nytt, du må gi den en rekonfigurering. Fiksen er å legge temaet i et Compartment og bytte det ut hver gang sidens tema endres:
const themeComp = new Compartment();
// ...extensions: [markdown(), themeComp.of(lightTheme)]
view.dispatch({ effects: themeComp.reconfigure(isDark ? darkTheme : lightTheme) });Nå følger den bryteren, mørk editor i mørk modus, og skriveflaten er solid slik at fjellet ikke skinner gjennom selve tekstboksen mens jeg skriver i den. Som jeg gjør, akkurat nå, for å skrive dette.