[WIP] Docs redesign #7530
[WIP] Docs redesign #7530
Conversation
|
I love this redesign! It's so bright and clean. Would it be possible to keep the search bar on the examples list? There's no rhyme or reason to how the examples are ordered so the search bar comes in handy quite often. |
|
@ryanhamley yes! Thanks for flagging this. I actually added that existing search bar in my first few weeks at Mapbox 👶and I'm sure I could build something better now. This would also be useful for examples pages on other docs sites. I'll work on building a component we can use across repos. |
There was a problem hiding this comment.
Thank youuuuu @colleenmcginnis this is awesome. I did a first pass here :)
A couple things I noticed:
- the url hash locations (ex http://localhost:8080/mapbox-gl-js/api/#map#unproject) don't take the header into account, so the hashed item is covered by the header when you navigate to an item and it also does not expand the item
- text wrapping isn't working correctly in the options table for long option names
- page kinda jumps around when you expand/collapse API methods 🤔
- this also happens in the old docs on Firefox, but it would be nice to fix if we can – the "Related" examples have weird alignment:
|
also if you rebase this branch on master that should fix the failing unit tests. |
mollymerp
force-pushed
the
docs-redesign
branch
from
258e71a to
2cf28f2
Compare
|
@mollymerp this is ready for another look whenever you are! |
There was a problem hiding this comment.
Nice work!! I'm noticing a couple funky things that may be related to the dr-ui components or batfisk or something else idk
when I click from the GL JS to the Style Spec, the drop-down thinks I've selected both:
its also weirdly slow when I click on a sidebar item (300ms on the GL JS API reference, and over 1 second on the style-spec page) – looks mostly related to setting state and parsing markdown. Is the whole style-spec being stored as state? I could imaging that diffing might take a long time 💭
I didn't have time to go through fully today, but thought I'd post my comments so far so I don't block ya. I'll come back to this tomorrow!
| {section.license && <div>License: {section.license}</div>} | ||
| {section.author && <div>Author: {section.author}</div>} | ||
| {section.copyright && <div>Copyright: {section.copyright}</div>} | ||
| {section.since && <div>Since: {section.since}</div>} |
There was a problem hiding this comment.
what are these parts for? I'm not seeing them when I run the page
There was a problem hiding this comment.
Hmmm I'm not sure either actually. This is currently included here https://github.com/mapbox/mapbox-gl-js/blob/mb-pages/docs/pages/api.js#L197-L202.
Ya I noticed that too. It will have to be addressed in /dr-ui. 😕 |
There was a problem hiding this comment.
seeing a couple small things on mobile:
text wrap is working for the option name column, but not the description column
lil floating white arrow over GL JS when opening the dropdown:
Otherwise this looks good to me! going to tag in one more reviewing from the GL team because this is such a large PR.
| .map(({frontMatter}) => frontMatter); | ||
| .map(example => { | ||
| return { | ||
| path: example.path, |
There was a problem hiding this comment.
why does pathname not work for the path here (i.e. why do you need to transform the frontmatter)?
* publisher-production: add docs for workerCount and maxParallelImageRequests (#7812)
|
I added a unit test for the example pages to assert title, metadata, tags, and pathname https://github.com/mapbox/mapbox-gl-js/blob/4b8113e1f480f1ea6e1e0ad5b0c77373230041b9/test/unit/docs/examples.test.js |
This PR introduces largely cosmetic changes to the Mapbox GL JS docs. Changes include:
Off to @mollymerp for a preliminary review!
cc @mapbox/docs