-
Notifications
You must be signed in to change notification settings - Fork 399
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
chore(website): improve markdown rendering #463
chore(website): improve markdown rendering #463
Conversation
Current md rendering involves a small blinking because the md is displayed first in a <pre> tag, and then it is replaced by the html transformed by the marked.js library. The change ensures the <pre> tag is hidden by default, which removes the blinking effect. To be compliant with browser that doesn't have javascript enabled, a <noscript> tag has also been added that override the <pre> tag display. So when javascript is not enabled, the <pre> is visible. Because the mailchimp form was inside the <pre> tag, it was not rendered as a form when JS was disabled, only the html tags were visible. To fix that I moved the mailchimp form outside the <pre>.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the contribution 🙏
I've taken it for a spin, looks great 💯
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you.
In the future, we should find a way to support this from the markdown files.
Let's merge this and find a better solution later.
Related with #439
@moul There's this golang lib https://github.com/yuin/goldmark that allows to extend markdown easily, I experienced it a little bit for the CLI documentation. That implies to process the markdown server side rather than client side like it is today, but I assume this is not a problem, right ? |
chore(website): improve md rendering Current md rendering involves a small blinking because the md is displayed first in a <pre> tag, and then it is replaced by the html transformed by the marked.js library. The change ensures the <pre> tag is hidden by default, which removes the blinking effect. To be compliant with browser that doesn't have javascript enabled, a <noscript> tag has also been added that override the <pre> tag display. So when javascript is not enabled, the <pre> is visible. Because the mailchimp form was inside the <pre> tag, it was not rendered as a form when JS was disabled, only the html tags were visible. To fix that I moved the mailchimp form outside the <pre>.
Description
Current md rendering involves a small blinking because the md is displayed first in a
<pre>
tag, and then it is replaced by the html transformed by the marked.js library. The change ensures the<pre>
tag is hidden by default, which removes the blinking effect.To be compliant with browser that doesn't have javascript enabled, a
<noscript>
tag has also been added, to override the<pre>
tag display. So when javascript is not enabled, the<pre>
is visible.Because the mailchimp form was inside the
<pre>
tag, it was not rendered as a form when JS was disabled, only the html tags were visible. To fix that I moved the mailchimp form outside the<pre>
.How has this been tested?
gnoland
andwebsite
binary, and visit http://localhost:8888.javascript
and select theDisable Javascript
option, then refresh the page. Same operation to re-enable it.