Skip to content
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

Fix docs overlapping navigation #4781

Merged
merged 5 commits into from
Nov 18, 2017
Merged

Conversation

chadfawcett
Copy link
Contributor

Summary

NOTE: This is a work in progress as I need some clarification on some of the docs pages (See below).

There are some comments in the markdown syntax highlighter that are longer than 80 characters. This forces the documentation container to over lap the side navigation. By manually wrapping the comments at 80 characters, it resolves this issue.

Before:
screen shot 2017-10-28 at 10 44 09 am

There were a couple of pages that I was unsure of how you'd like the lines to be displayed. For example, the Using with webpack page has configs that look like the following:

"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"

I feel like in this case, rather than breaking the line apart, the code block should scroll horizontally like GitHub. Similarly this would be a better fit on the Troubleshooting page where the following example error is shown:

- Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.`

If you agree, I'd be happy to work on that as well.

PS: After starting the docs with yarn start there was some file changes that happened on 2a4eb38 which I committed separately incase I need to revert it.

Test plan

After:
screen shot 2017-10-28 at 10 44 24 am

@chadfawcett
Copy link
Contributor Author

I can also look into getting prettier to handle the 80 character wrap in markdown syntax highlighting if that would be beneficial.

@SimenB
Copy link
Member

SimenB commented Oct 28, 2017

Related: prettier/prettier#2943 (unreleased)

@chadfawcett
Copy link
Contributor Author

Thanks @SimenB, I saw that the PR was merged awhile ago. I was going to dive deeper into it, I didn't realize it wasn't released yet.

@SimenB
Copy link
Member

SimenB commented Oct 29, 2017

If you agree, I'd be happy to work on that as well.

I agree it makes sense for actual code to not get wrapped, and rather scroll horizontally 🙂

@chadfawcett
Copy link
Contributor Author

@rogeliog Sorry for the delay, I'll try to get this PR finished up this weekend.

@cpojer
Copy link
Member

cpojer commented Nov 17, 2017

Ping, are you still working on this?

@chadfawcett
Copy link
Contributor Author

Yes, my apologies for the delay.

@chadfawcett
Copy link
Contributor Author

So the Using with webpack issue was resolves with the update to Prettier in #4853.

As for the issue in Troubleshooting, it looks like it's an issue upstream in docusaurus, which has a broken link to the repo so I'm not sure I can contribute to that.

I could fix it by adding to static/css/custom.css but would prefer the fix to come from upstream.

This PR can either be merged in as is to fix the word wraps and leave the other issue to the upstream dependency, or I can write some overriding styles until the dependency is fixed. Please let me know what you would like.

@codecov-io
Copy link

Codecov Report

Merging #4781 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@          Coverage Diff           @@
##           master   #4781   +/-   ##
======================================
  Coverage    59.9%   59.9%           
======================================
  Files         197     197           
  Lines        6549    6549           
  Branches        4       4           
======================================
  Hits         3923    3923           
  Misses       2626    2626

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 14957ab...b8060f2. Read the comment docs.

@github-actions
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 13, 2021
@chadfawcett chadfawcett deleted the fix-doc-word-wrap branch May 13, 2021 17:18
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants