Resolve bugs inside migrated website

[akshatnema]

Description

Currently, we are moving the website codebase to Next v14 + Typescript, as per #2636.

We are now open to resolving bugs/errors inside the migrated website. All the community members and contributors are requested to mention the bugs/errors inside this issue and do take the initiative to resolve them. Kindly note that you should adhere to Contributing guidelines and make PRs on the migrate-ts branch only.

Current website - https://www.asyncapi.com/en
Migrated website - https://deploy-preview-2710--asyncapi-website.netlify.app/
PR Link of migrate-ts branch - #2710

Format of Issue Submission

Don't create a new issue regarding each bug/error. Instead, follow the given template below to report the bugs in the issue comments only and the maintainers (@anshgoyalevil @sambhavgupta0705 @akshatnema) should approve those bugs before start working on it.

Format of issue comment:

#### Name: 
#### Description:
#### Page slug or URL where bug is present:
#### Screenshot (of current website):
#### Screenshot (of migrated website):

[akshatnema]

Name

Not able to render custom JSX components from MD files

Description

Currently, the migrated website is not able to render custom JSX components from MD files like Youtube, CodeBlock, DocCards, etc. It is the issue with @mdx-js/loader that it can't able to render JSX components inside the migrated website from MD files. Instead, it can render the components from MDX files, but we can't simply migrate our Docs and Blogs to MDX as it is not the correct solution to tackle this problem.

URL

https://deploy-preview-2710--asyncapi-website.netlify.app/docs

Current website screenshot

Migrated website screenshot

[vishvamsinh28]

Name

Size of logo decreases when clicking on the hamburger icon on navbar on mobile devices

Description

On mobile devices when clicking on the hamburger icon on navbar the size of logo should remain same but it gets smaller

URL

https://deploy-preview-2710--asyncapi-website.netlify.app/

Current Website Screenshot

Migrated Website Screenshot

[Lovelyfin00]

Name

Size of logo decreases when clicking on the hamburger icon on navbar on mobile devices

Description

On mobile devices when clicking on the hamburger icon on navbar the size of logo should remain same but it gets smaller

URL

https://deploy-preview-2710--asyncapi-website.netlify.app/

Current Website Screenshot

Migrated Website Screenshot

Hiii
I’d like to take a look at this and fix it

[NightFury742]

Name

Text truncation styling issue with mermaid.js diagrams

Description

When the /docs/concepts/producer route is opened via navigating from other routes, the diagrams render properly. However, when you directly open the route, the text within truncates. This issue persists among most mermai.js diagrams throughout the website both new and old. I've attached a video explaining the same.

truncationIssue.mp4

URL

https://deploy-preview-2710--asyncapi-website.netlify.app/docs/concepts/producer

Current website screenshot

Migrated website screenshot