search

code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

Pass `staticMediaQuery` to ScrollyCoding via props #390

Open jgarrow opened 1 year ago

jgarrow commented 1 year ago

I'm working on a docs site that has multiple different page layouts. Depending on the page, I want to be able to override the codeConfig options on the component level. Specifically, I'm wanting to change the value of staticMediaQuery for the Scrollycoding component depending on which page layout is being used. However, passing a codeConfig prop appears to always be overridden by the config values at the plugin configuration level.

Example expected implementation

Neither of these attempts seem to have any effect.

<CH.ScrollyCoding codeConfig={{staticMediaQuery: "not screen (max-width: 960px)"}}>

OR

<CH.ScrollyCoding staticMediaQuery="not screen (max-width: 960px)" >

Example repo

I'm running into this issue both in the site I'm working on as well as in this minimal reproducible example:

I've added a staticMediaQuery both to the next.config.js and a differing media query in the CH.Scrollycoding component's props in the scrollycoding.mdx file.

StackBlitz link

pomber commented 1 year ago

Yes, that's not implemented right now. I'll try to make the second option work soon. It will be consistent with other settings like <CH.ScrollyCoding lineNumbers={true}>