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

fix: nexti18nSetup for OG tags error #3111

Merged
merged 56 commits into from
Sep 7, 2024

Conversation

sambhavgupta0705
Copy link
Member

This PR fixes the OG tag error

Co-authored by : @JeelRajodiya

fixes: #2639

Copy link

netlify bot commented Jul 23, 2024

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit d2740c4
🔍 Latest deploy log https://app.netlify.com/sites/asyncapi-website/deploys/66db50d57dc40b0008e205f2
😎 Deploy Preview https://deploy-preview-3111--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@asyncapi-bot
Copy link
Contributor

asyncapi-bot commented Jul 23, 2024

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 43
🟢 Accessibility 98
🟢 Best practices 92
🟢 SEO 100
🔴 PWA 33

Lighthouse ran on https://deploy-preview-3111--asyncapi-website.netlify.app/

@sambhavgupta0705
Copy link
Member Author

@aeworxet This is the draft PR for the issue
@akshatnema @anshgoyalevil PTAL

@aeworxet
Copy link
Contributor

@asyncapi/bounty_team

@asyncapi-bot asyncapi-bot added the bounty AsyncAPI Bounty program related label label Jul 23, 2024
@@ -43,7 +43,7 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
return (
<div className={`rounded-lg ${className}`}>
<article className='h-full rounded-lg'>
<Link href={post.slug}>
<div >
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this change?

Copy link
Contributor

@JeelRajodiya JeelRajodiya Jul 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Link was causing the hydration to fail (see screenshot)

image

The reason behind the hydration error was that we are nesting a <Link> tag within <Link> tag.

The first <Link> Tag:

<Link href={post.slug}>

The second (nested) <Link> Tag:

<Link href={post.slug}>
<span className='block' data-testid='FeaturedBlog-title'>
<Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
{post.title}
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
<TextTruncate element='span' line={2} text={post.excerpt} />
</Paragraph>
</span>
</Link>

Both of these links has the same target (i.e. post.slug). So removing the outer Ling tag should not have any side effects.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div >
<div>

@@ -165,7 +165,7 @@ servers:
The API client must request an authentication "token" via the following REST API endpoint "GetWebSocketsToken" to connect to WebSockets Private endpoints. For more details, read https://support.kraken.com/hc/en-us/articles/360034437672-How-to-retrieve-a-WebSocket-authentication-token-Example-code-in-Python-3

The resulting token must be provided in the "token" field of any new private WebSocket feed subscription:
```

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this Codeblock is removed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please Go to the production url https://www.asyncapi.com/blog/websocket-part2
You will see the following error message in the blog content.

Application error: a client-side exception has occurred (see the browser console for more information).

After Fixing the i18n configuration, the most part of the site started to render on the server. So any inconsistency in the markdown can be caught during the build.

When we kept the codeblocks, the following error was occuring during build

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we show that code as part of codeblock. Don't we have any solution for it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

It's giving a weird response inside CodeBlock.

Copy link
Contributor

@JeelRajodiya JeelRajodiya Aug 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sambhav has pushed solution in this commit. PTAL. Thanks.

package.json Outdated
@@ -90,7 +92,7 @@
"react-dom": "^18",
"react-ga": "^3.3.1",
"react-gtm-module": "^2.0.11",
"react-i18next": "^14.0.5",
"react-i18next": "^14.1.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this library?

Copy link
Contributor

@JeelRajodiya JeelRajodiya Jul 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sambhavgupta0705 We should uninstall the react-i18next library, i don't think we need it anymore.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I will fix this one

Comment on lines 245 to 248
// /**
// * @description Get the language for the CLI page.
// * @returns { paths: { params: { lang: string } }[]; fallback: boolean }
// */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// /**
// * @description Get the language for the CLI page.
// * @returns { paths: { params: { lang: string } }[]; fallback: boolean }
// */

Remove this comment.

pages/_app.tsx Outdated
<AppContext.Provider value={{ path: router.asPath }}>
{/* <MDXProvider components={mdxComponents}> */}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why MDXProvider is commented?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are now using the MDX provider for the next.js instead of the provider from the @mdx-js/react library.
you can find the configuration of the new next.js MDX Provider here.

When we kept provider from @mdx-js/react. We ran into several MDX errors during the build. (see screenshot)

image

@sambhavgupta0705 I think we should delete the commented lines

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, are we now changing the whole MDX rendering part as well?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes correct.
Please note that, it does not affect end result. Rendered MDX will look exactly as it did with the previous MDXProvider.

@sambhavgupta0705
Copy link
Member Author

@akshatnema ptal

@akshatnema
Copy link
Member

Merging this without docs approval because MD file changes are not changing any doc content. Only a few markdown syntax changes are there.

@akshatnema akshatnema merged commit 4e36482 into asyncapi:master Sep 7, 2024
13 of 14 checks passed
@sambhavgupta0705
Copy link
Member Author

sambhavgupta0705 commented Sep 7, 2024

Finally Merged @aeworxet 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bounty AsyncAPI Bounty program related label
Projects
Status: Completed
Development

Successfully merging this pull request may close these issues.

OpenGraph meta tags are not rendered and when rendered, URLs are wrong
5 participants