interactive-examples
interactive-examples copied to clipboard
mdn
When testing with local server, show editor with more realistic width
I just thought — when writing the interactive examples we always try to make both the example and the code lines narrow enough so they fit comfortably inside their respective panes.
But when you text it locally, the editor is shown at the full screen width, which is a lot wider than it'll actually be shown in the content column on MDN.
It would be great to have an option to set it to the typical MDN content column size instead. I could resize my browser, but I'm lazy ;-)
Yeah, this makes a lot of sense to me. A mockup MDN page would be even nicer :)
This would definitely be useful, but IMO both writing examples and fixing https://github.com/mdn/interactive-examples/issues/706 are higher priorities.
I second this idea (struggled with that a bit in some examples).
My idea is to go for something in-between: Not a full-blown MDN mockup, but also not just adjusting the width of the editor. How about adding a mock MDN header and right sidebar and mimic the prod MDN widths and media queries?
Happy to file a PR against the https://github.com/mdn/bob repo. (I assume that’s where all the editor code went?!)
Happy to file a PR against the https://github.com/mdn/bob repo. (I assume that’s where all the editor code went?!)
Yes :). Thanks for offering to help: I think this is a good idea.
Just realized that this is more complicated than I thought.
My initial plan was to bundle in some CSS with the editor styles that makes sure the code demos are embedded in a more realistic surrounding. But if I understand mdn-bob correctly, this bundled CSS would also end up in the production demos.
What do you think @schalkneethling, can we add an env variable to the npm scripts to only add the mdn mock CSS when building locally/testing code demos?
@stephanmax Yup, that sounds like a good plan. I would move this over to BoB, as that is where this work is happening. I will open a new issue on that repo and tag you. Thanks!
