Skip to content

Rebuild Support for custom Markdown on Configuration page #2564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Jan 13, 2019

Conversation

montogeek
Copy link
Member

@montogeek montogeek commented Oct 2, 2018

This PR add support for custom Markdown in the Configuration page: https://webpack.js.org/configuration/, click the chevrons in the huge code example.

It is using mdx-loader to convert Markdown to React components, once in React, we can do pretty much anything with them.

That is just an example, some other ideas I have:

  1. Show that card to the right, outside of the snippet, it would automatically update the content when you hover your mouse on each option, the card will follow your scroll, this won’t be accessible because text won’t exist until it is show.
  2. Just fill the page with those cards (accessible by default), these cards would be to the right of the snippet, one problem is space, some options are too large.
  3. Make it an accordion that would toggle below the option, but content would be accessible and with better style to made it really pop.

It is very important the accessible aspect, we have to make sure the entire doc is searchable using (Cmd|Ctrl)+F, it is a common interaction when looking for documentation.

You can see an demo of how it works here: https://gfycat.com/ArcticAdmiredAntipodesgreenparakeet

Copy link
Member

@EugeneHlushko EugeneHlushko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks very good already m8! would like to see the final thing asap and merge the bloody rebuild into master 👯 👯 👯 👨‍🎨 👍

@montogeek
Copy link
Member Author

montogeek commented Oct 2, 2018

merge the bloody rebuild into master 👯 👯 👯 👨‍🎨 👍

Me too, me too

@montogeek montogeek mentioned this pull request Dec 15, 2018
16 tasks
@montogeek
Copy link
Member Author

@EugeneHlushko Please take a look, once this is merged, we can merge rebuild!

Copy link
Member

@EugeneHlushko EugeneHlushko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small formatting notes, also a suggestion for mobile UX. Although if you want, we tackle it later (the ux proposal)

containerClassName={"shadow"}
content={<Card body={content} />}
>
<span className={`code-details-summary-span ${className}`} onClick={this.toggleVisibility}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span className={`code-details-summary-span ${className}`} onClick={this.toggleVisibility}>
<span className={`code-details-summary-span${className}`} onClick={this.toggleVisibility}>

return (
<Popover
isOpen={open}
position={["right", "top"]}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what if we make this resolution agnostic? e.g. for narrow screens just make it fixed at bottom and limit its vertical space?
screen shot 2018-12-17 at 6 04 36 pm

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed a prop from the lib so it decides best way to show it, works fine on mobile and desktop.

Copy link
Member

@EugeneHlushko EugeneHlushko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some duplication remove

@EugeneHlushko
Copy link
Member

testing this

Copy link
Member

@EugeneHlushko EugeneHlushko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@EugeneHlushko EugeneHlushko merged commit f33ab8b into rebuild Jan 13, 2019
@EugeneHlushko EugeneHlushko deleted the rebuild-details-details branch January 13, 2019 10:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants