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

chore(website): improve markdown rendering #463

Merged
merged 1 commit into from
Jan 19, 2023

Conversation

tbruyelle
Copy link
Contributor

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?

  • Run gnoland and website binary, and visit http://localhost:8888.
  • to disable Javascript, open chrome debugger tool, type Ctrl+Shift+P, type javascript and select the Disable Javascript option, then refresh the page. Same operation to re-enable it.

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>.
Copy link
Member

@zivkovicmilos zivkovicmilos left a 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 💯

Copy link
Member

@moul moul left a 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 moul merged commit 0a7e14e into gnolang:master Jan 19, 2023
@tbruyelle tbruyelle deleted the chore/improve-website-rendering branch January 19, 2023 15:06
@tbruyelle
Copy link
Contributor Author

@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 ?

harry-hov pushed a commit to harry-hov/gno that referenced this pull request Jan 27, 2023
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>.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

None yet

3 participants