Bug report

[Nico]

Describe the bug

We have some issues related to the styles of DocLink and ButtonLink components

To reproduce

• for DocLink check /community/support page
• for ButtonLink check /guides/how-to-swap-tokens page

Expected behavior

Proper styling

Screenshots

DocLink

ButtonLink

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

No response

Would you like to work on this issue?

• Yes
• No

[Pablo Pettinari]

This problem is related to the new version of mdx that we are using here, v2.

The current syntax that we are using works with mdx v1. Since we have upgraded it to v2, a few things have changed. For example, content that is inside jsx is now considered markdown, so:

<Button>
  See our other guides
</Button>

// in v1, this is converted to:
<button>
  See our other guides
</button>

// in v2, the new line will means that this is a new paragraph:
<button>
  <p>See our other guides</p>
</button>

Then what we should do to keep the previous form in mdx v2, would be:

// avoid the new line
<Button>See our other guides</Button>

// or we could use this form to avoid being parsed as markdown
// https://mdxjs.com/migrating/v2/#expressions
{
<Button>
  See our other guides
</Button>
}

More about changes in v2: https://mdxjs.com/migrating/v2/#update-mdx-files

---

IMO given that fixing this issue would imply changes in a lot of md pages (and a lot of sync conflicts with upstream), I'd propose not doing this mdx migration now and creating its own epic/task to be tackled after we finish the current NextJS migration.

This would mean to downgrade mdx to v1, which means that we'd need to downgrade next-mdx-remote to v3.

cc @nhsz @corwintines @wackerow @minimalsm

[Pablo Pettinari]

If we all agree then I will reopen ethereum#9160 to keep track of that.

[Nico]

IMO given that fixing this issue would imply changes in a lot of md pages (and a lot of sync conflicts with upstream), I'd propose not doing this mdx migration now and creating its own epic/task to be tackled after we finish the current NextJS migration.

@pettinarip thanks for the research. Agree to downgrade next-mdx-remote to v3 for now and migrate to mdx v2 later. We would need to test that next-mdx-remote v3 doesnt break the build or introduce other bugs

[Pablo Pettinari]

@nhsz cool, I can tackle that. Will create a new card.

On the other hand, I'll reopen the mentioned issue.

[Nico]

@pettinarip re-opening as there's still a minor difference with the styling of DocLink component, maybe related to the updated Link component

now rendering

---

should be

[Nico]

Fixed now by #21, thx!