fix: improve styling in pro-help page

[Thund3rHawk]

What kind of change does this PR introduce?
Adjust the styling of the pro-help page to address the inconsistent image sizes, wrap the bio inside a markdown component for increasing word limitations and resolve the spacing issues between the cards.

Issue Number:

• Closes Issues with the Pro-Help page #1368

Screenshots/videos:

If relevant, did you update the documentation?
No

Summary
This pr resolves the issue #1368

[jdesrosiers]

The website uses markdown in lots of places already. You shouldn't need to include a new dependency, just use what's already being used on other pages. If you don't find it I'm sure someone can chime in and point you at the right component.

[Thund3rHawk]

Sure. Please help.

[DarhkVoyd]

@Thund3rHawk, have you had a chance to explore the StyledMarkdown component that we’ve integrated across our website?

[Thund3rHawk]

Hello @DarhkVoyd, thank you for pointing this out! I haven’t had the chance to explore the StyledMarkdown component yet, but I’m looking forward to diving into it. Could you let me know the best place to ask questions if I get stuck along the way?

[Thund3rHawk]

@jdesrosiers done. Please check.

[DhairyaMajmudar]

@Thund3rHawk your PR is failing CI checks pls. fix them by running the command yarn format:fix in console.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	b28a5e2

[Thund3rHawk]

@DhairyaMajmudar done.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (82fb9c7) to head (b28a5e2).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1376   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          373       373           
  Branches        94        94           
=========================================
  Hits           373       373           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jdesrosiers]

Something's not right. See how Julian an my bios get rendered differently. The line spacing is different. Maybe other things as well, but that's the obvious one.

[Thund3rHawk]

Hello @jdesrosiers, I’ve noticed an issue with the input item, which seems to occur because we are rendering JSON inside a Markdown component. Could you suggest a solution to resolve this issue? Alternatively, I’m considering creating a JSON-to-Markdown converter. Please advise on which approach would be more effective.

[jdesrosiers]

I’ve noticed an issue with the input item, which seems to occur because we are rendering JSON inside a Markdown component. [...] I’m considering creating a JSON-to-Markdown converter.

That doesn't make sense. It shouldn't make any difference where the data came from. It could be JSON, YAML, or even plain text. By the time the component gets it, it's just a string. So, a new component doesn't make sense to me.

Could you suggest a solution to resolve this issue?

From what I can see, it looks like the StyledMarkdown component renders markdown differently if there are newlines present in the string. You get a span if it's just one block of text and ps and divs if there are multiple blocks. That sounds like a bug in the way the StyledMarkdown component works. It should be styled consistently in either case. Either it needs to be styled properly for the single block case, or it needs to somehow be forced to always use the multi-block rendering mode. The latter seems like a better approach to me because it's always going to be consistent and there aren't two different places it needs to be styled that can get out of sync.

But, I'm not very familiar with the website's architecture so, @DarhkVoyd or @DhairyaMajmudar can probably give better guidance in this case.

[Thund3rHawk]

From what I can see, it looks like the StyledMarkdown component renders markdown differently if there are newlines present in the string.

I think it should be a new issue. I'll work on that.

[DhairyaMajmudar]

Hi @jdesrosiers @Thund3rHawk, I explored the root cause of the issue and its not related to StyledMarkdown component.

In the contractors.json file the bio data of Jason consists of special characters \n\n which changes its the text type from HTML to markdown as of which such problems are made.

This can be resolved if we replace that special character to <br/> HTML tag.

[DhairyaMajmudar]

Here's how it looks after doing the changes, making the text consistent with other contractors text

Opened a PR in community repo to resolve this: json-schema-org/community#869

[jdesrosiers]

In the contractors.json file the bio data of Jason consists of special characters \n\n which changes its the text type from HTML to markdown as of which such problems are made.

It sounds like your solution is backwards. The problem isn't that my bio is being interpreted as markdown. The problem is that the other bios aren't being interpreted as markdown. The bio field should always be interpreted as markdown, not HTML.

[Thund3rHawk]

Would it be better if the bio came inside a markdown format instead of JSON? I feel it might be a more efficient solution.

[jdesrosiers]

Would it be better if the bio came inside a markdown format instead of JSON?

That sentence doesn't make sense to me. What does it mean for the bio to come inside a markdown format? Markdown is just a string that uses markdown syntax. The bio is a string that uses markdown syntax. What are you suggesting should be different?

[Thund3rHawk]

Hello @jdesrosiers @DhairyaMajmudar, Please check now the bio renders correctly as expected.

[jdesrosiers]

Sorry I posted this comment on the issue instead of the PR on accident. It explains the problem and the solution.

Using the <Markdown> makes all the bios look the same, but that's because you removed all styling. We want this markdown to be styled the same as other markdown on the site. For example, notice the inline code block in the bio. It's not styled properly. Also there's no spacing between paragraphs as there should be.

The solution is in the comment that I linked to above. That will ensure that the markdown gets styled consistently across all bios and the rest of the site. That does mean that the line spacing of the bios will be different than before this change. @DarhkVoyd, @DhairyaMajmudar, do we care that the styling is a little different than it was before? If so, what's the best way to adjust the line height just for this page?

[DhairyaMajmudar]

Thank you @jdesrosiers for suggesting the fix, after applying the forceBlock:true the contractors profile will look like this

Jason's Profile	Jaun's Profile	Julian's Profile

We can achieve this by passing a default false prop in StyledMarkdown component which can enable or disable forceBlock option. By means of this the other places of website where markdown is used won't be affected by forceBlock option and here where we need that it can be set to true and taken in use.

What are your views for this?

[jdesrosiers]

We can achieve this by passing a default false prop in StyledMarkdown component which can enable or disable forceBlock option. By means of this the other places of website where markdown is used won't be affected by forceBlock option and here where we need that it can be set to true and taken in use.

I think you're assuming that block mode would only be used on this page. That's not correct. The entire site renders markdown in block mode. I'm pretty certain that this page is the only place were the markdown we use is simple enough that markdown-to-jsx decided to render it in inline mode instead of block mode. Everywhere else uses block mode. So, setting forceBlock: true should be a no-op for the rest of the site. It tells markdown-to-jsx to choose block mode even though it was already choosing block mode anyway. If there are places on the site where the markdown is getting rendered in inline mode, it's almost certainly just as wrong there as it is on this page and this change would fix those problems too.

So, my solution would be to set forceBlock: true and not bother providing a prop to override it. I don't think we ever actually want inline mode and this makes sure this problem doesn't show up in other places in the future. If it turns out that we do need to render in inline mode in the future, we can add an option to force inline mode, but I wouldn't do that until we determine that there's actually a need for it.

@DhairyaMajmudar, I think your solution is ok but I don't think it's the best approach. Your solution is best to make sure we don't accidentally break something now. My solution is best to ensure we don't see this same bug in the future on other pages. Your approach is safer now, but the risk is negligible and has no real consequence, so I'd rather take that risk and protect ourselves from encountering this bug again.

The question remains, are we ok with the style changes introduced by using markdown? Does the rest of the page need additional adjustments to match the markdown styling (and the rest of the site)?

[DhairyaMajmudar]

I got your point Jason and it's pretty valid to ensure block mode on all of the website pages where markdown is rendered.

The question remains, are we ok with the style changes introduced by using markdown? Does the rest of the page need additional adjustments to match the markdown styling (and the rest of the site)?

Yeah there are some changes required to match the overall page with the other pages of the website, like...

• The sidebar component is currently missing which will be resolved after merging of PR: Fix : pro help sidebar alignment and add buttons #1310
• There's also a scope of improvements for font sizes and how proof of work links are shown as after applying the suggested fix those links will look a bit more highlighted as compared to the bio section.

[jdesrosiers]

@DhairyaMajmudar Sounds good to me!

There's also a scope of improvements for font sizes and how proof of work links are shown as after applying the suggested fix those links will look a bit more highlighted as compared to the bio section.

I think at a minimum we'll want to update the font color and line spacing to match the markdown. @Thund3rHawk If you implement the fix we've been discussing and at least those minimal style updates, I promise I won't ask for anything else 😆.

[Thund3rHawk]

@jdesrosiers Absolutely! I’d be happy to implement the fix you are discussed. If you could help implement the fix along with the font color and line spacing updates, I’d be truly grateful.

[jdesrosiers]

Thanks to everyone who helped with this!