fix: nexti18nSetup for OG tags error

components/CaseStudyCard.tsx

@@ -19,7 +19,7 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   return (
     <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
       {studies.map((study, index) => (
-        <a key={index} href={`casestudies/${study.id}`}>
+        <a key={index} href={`${study.id}`}>
           <div
             className='max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
             data-testid='CaseStudyCard-main'

components/Head.tsx

@@ -30,7 +30,7 @@ export default function HeadComponent({
   rssTitle = 'RSS Feed for AsyncAPI Initiative Blog',
   rssLink = '/rss.xml'
 }: IHeadProps) {
-  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || 'http://localhost:3000';
+  const url = process.env.NEXT_PUBLIC_DEPLOY_PRIME_URL || process.env.NEXT_PUBLIC_DEPLOY_URL || 'http://localhost:3000';
   const appContext = useContext(AppContext);
   const { path = '' } = appContext || {};
   let currImage = image;

components/MDX/MDX.tsx

@@ -38,7 +38,7 @@ import Profiles from '../Profiles';
 import Remember from '../Remember';
 import Sponsors from '../sponsors/Sponsors';
 import Warning from '../Warning';
-import { Table, TableCell, TableHeader, TableRow } from './MDXTable';
+import { Table, TableBody, TableCell, TableHeader, TableRow, Thead } from './MDXTable';
 
 let mermaidInitialized = false;
 
@@ -174,8 +174,8 @@ function Text({ content = '', className = '' }) {
 /**
  * @description This function returns MDX components.
  */
-export function getMDXComponents() {
-  return {
+const getMDXComponents =
+ {
     h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
       <h1
         {...props}
@@ -293,6 +293,8 @@ export function getMDXComponents() {
     Tr: TableRow,
     Td: TableCell,
     Th: TableHeader,
+    Tbody: TableBody,
+    Thead,
     Table,
     Asyncapi3ChannelComparison,
     Asyncapi3IdAndAddressComparison,
@@ -328,9 +330,8 @@ export function getMDXComponents() {
     Profiles,
     Visualizer
   };
-}
 
-const mdxComponents = getMDXComponents();
+export const mdxComponents = getMDXComponents;
 
 interface MDXProviderProps {
   children: React.ReactNode;

components/MDX/MDXTable.tsx

@@ -57,3 +57,23 @@ export function TableHeader(props: React.HTMLProps<HTMLTableCellElement>) {
     />
   );
 }
+
+/**
+ * Renders the body of a table.
+ *
+ * @param props - The HTML props for the `<tbody>` element.
+ * @returns The rendered `<tbody>` element.
+ */
+export function TableBody(props: React.HTMLProps<HTMLTableSectionElement>) {
+    return <tbody {...props} className={`${props.className || ''}`} />;
+}
+
+/**
+ * Renders the body of a table.
+ *
+ * @param props - The HTML props for the `<tbody>` element.
+ * @returns The rendered `<tbody>` element.
+ */
+export function Thead(props: React.HTMLProps<HTMLTableSectionElement>) {
+    return <thead {...props} className={`${props.className || ''}`} />;
+}

components/NewsletterSubscribe.tsx

@@ -2,8 +2,7 @@ import { useState } from 'react';
 
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-
-import { useTranslation } from '../utils/i18n';
+import { useTranslation } from 'next-i18next';
 import Button from './buttons/Button';
 import Loader from './Loader';
 import Heading from './typography/Heading';

components/dashboard/Header.tsx

@@ -27,7 +27,7 @@ export default function Header() {
           href='https://github.com/asyncapi?type=source#-contribute-to-asyncapi'
           target='_blank'
         />
-        <GithubButton className='lg:mt-0' />
+        <GithubButton text= 'View on Github' className='lg:mt-0' />
         <SlackButton className='lg:mt-0' />
       </div>
     </div>

components/link.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { defaultLanguage, languages } from '../utils/i18n';
-import i18nPaths from '../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
 interface LinkComponentProps {
   children: React.ReactNode;

components/navigation/NavBar.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 
-import { defaultLanguage, languages, useTranslation } from '../../utils/i18n';
-import i18nPaths from '../../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
+
 import { SearchButton } from '../AlgoliaSearch';
 import AsyncAPILogo from '../AsyncAPILogo';
 import GithubButton from '../buttons/GithubButton';

components/newsroom/FeaturedBlogPost.tsx

@@ -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 >
           <span
             className={
               'flex h-full cursor-pointer flex-col divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg md:max-w-164 md:flex-row'
@@ -117,7 +117,7 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
               </div>
             </div>
           </span>
-        </Link>
+        </div>
       </article>
     </div>
   );

markdown/blog/asyncapi-and-apicurio-for-asynchronous-apis.md

@@ -58,7 +58,7 @@ In practice, the definition can become quite long. Consider the below example fr
     defaultContentType: application/json
 
     channels:
-      smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
+      smartylighting.streetlights.1.0.event.\{streetlightId\}.lighting.measured:
         description: The topic on which measured values may be produced and consumed.
         parameters:
           streetlightId:
@@ -161,7 +161,7 @@ For example, it is possible to add a key for Kafka messages:
 
     ...
     channels:
-      smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
+      smartylighting.streetlights.1.0.event.\{streetlightId\}.lighting.measured:
         description: The topic on which measured values may be produced and consumed.
         parameters:
           streetlightId:
@@ -219,4 +219,4 @@ Many other official projects of the AsyncAPI team are still in the alpha or beta
 
 If you want to dive a bit deeper, I recommend having a look at the recording of the AsyncAPI conference in November 2021. There were many interesting talks on how AsyncAPI can be used in projects and with other tools. For more details on how to use schemas, schema registries, and API registries with AsyncAPI, listen to my conference talk below.
 
-<YouTube id="37X4Hbu0bSQ" />
+<YouTube id="37X4Hbu0bSQ" />

markdown/blog/event-streaming-an-additional-architectural-style-to-suplement-api-design.md

@@ -21,9 +21,9 @@ The growth and adoption of web-based APIs is key to the transformational technol
 To illustrate, assume we have a project management API with the following interactions:
 
 1. Create a project (e.g. POST /projects)
-1. Create a new task (e.g. POST /projects/{projectId}/tasks)
-1. Assign the task to someone on our team (e.g. POST /tasks/{taskId}/assignees)
-1. The assignee marks the task as complete (e.g. PUT /tasks/{taskId})
+1. Create a new task (e.g. POST /projects/\{projectId\}/tasks)
+1. Assign the task to someone on our team (e.g. POST /tasks/\{taskId\}/assignees)
+1. The assignee marks the task as complete (e.g. PUT /tasks/\{taskId\})
 
 An API following this design works if design of the user interface closely mirrors those endpoints. But suppose an additional application requirement is to ‘automatically’ update a task’s status when marked complete by another user. With a request/response web-API, an option is to incessantly poll a status API on the chance a status might have changed. This is both cumbersome and error-prone.
 Instead of polling, we can introduce an __event-driven architecture__.
@@ -74,4 +74,3 @@ As API designers, we must strive to use all available tools to offer a better de
 1. How will my API consumers benefit from the addition of these events and how do they take advantage of them?
 
 Let’s shift our approach from strictly request-response to thinking in terms of how our APIs can not only offer endpoints for requests, but events that enable the API to push to other services. The result will be increased innovation and more transformative APIs both within and across our LOBs.
-

markdown/blog/status-update-27-20.md

@@ -74,7 +74,7 @@ We are getting a bit tired of Nunjucks and how hard it is to debug and read the
 
 The last meeting took place on Tuesday, 23rd of June, 4PM UTC. Meeting notes are available [here](https://github.com/asyncapi/asyncapi/issues/394).
 
-<Youtube id="LDanOihP9i4" />
+<YouTube id="LDanOihP9i4" />
 
 The next meeting is scheduled for next Tuesday, 7th of July, 8AM UTC. 
 

markdown/blog/websocket-part2.md

@@ -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: 
-      ```
+
       \{
         "event": "subscribe",
         "subscription":
@@ -174,7 +174,7 @@ servers:
           "token": "WW91ciBhdXRoZW50aWNhdGlvbiB0b2tlbiBnb2VzIGhlcmUu"
         }
       }
-      ```
+
 ```
 
 ### Endpoints aka Channels
@@ -473,7 +473,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: 
-      ```
+
       \{
         "event": "subscribe",
         "subscription":
@@ -482,7 +482,7 @@ servers:
           "token": "WW91ciBhdXRoZW50aWNhdGlvbiB0b2tlbiBnb2VzIGhlcmUu"
         }
       }
-      ```
+
 
 channels:
   /:

markdown/docs/tools/cli/context.md

@@ -123,7 +123,7 @@ Map of filesystem paths to target AsyncAPI documents.
 
 Field Pattern | Type | Description
 ---|:---:|---
-{contextName} | `string` | An optional string value representing filesystem path to the target AsyncAPI document.
+\{contextName\} | `string` | An optional string value representing filesystem path to the target AsyncAPI document.
 
 ### <a name="minimalEmptyContextFile"></a>Minimal Empty Context File
 Raw JSON:

markdown/docs/tools/cli/metrics_collection.md

@@ -1,3 +1,8 @@
+---
+title: 'Metrics Collection'
+weight: 20
+---
+
 # Metrics collection guideline
 
 AsyncAPI **anonymously** tracks command executions to improve the specification and tools, ensuring no sensitive data reaches our servers. It aids in comprehending how AsyncAPI tools are used and adopted, facilitating ongoing improvements to our specifications and tools.

markdown/docs/tools/glee/bearerToken.md

@@ -81,7 +81,7 @@ export async clientAuth({ parsedAsyncAPI, serverName }) {
 }
 ```
 
-Glee will utilize the `token` for server authentication, employing it in the header with the format: Authorization: Bearer {token}.
+Glee will utilize the `token` for server authentication, employing it in the header with the format: Authorization: Bearer \{token\}.
 
 ### Server side
 

markdown/docs/tools/glee/installation.md

@@ -80,7 +80,7 @@ These scripts refer to the different stages of developing an application.
 
 #### Create `asyncapi.yaml` file and other required directories
 
-Create a yaml file that supports capable of receiving a "hello {name}" message with the protocol as `ws` and the channel name  as `hello` the hello API will subscribe to. The operationId property is `onHello` that's the name of function and the payload property is type string publishing to that channel.
+Create a yaml file that supports capable of receiving a "hello \{name\}" message with the protocol as `ws` and the channel name as `hello` the hello API will subscribe to. The operationId property is `onHello` that's the name of function and the payload property is type string publishing to that channel.
 
 ```yaml
 asyncapi: 3.0.0

mdx-components.tsx

@@ -0,0 +1,16 @@
+import type { MDXComponents } from 'mdx/types';
+
+import { mdxComponents } from '@/components/MDX/MDX';
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including inline styles,
+// components from other libraries, and more.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    ...mdxComponents,
+    ...components
+  };
+}

next-i18next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    i18n: {
+      locales: ['en', 'de'],
+      defaultLocale : 'en',
+      namespaces: ['landing-page', 'common', 'tools'],
+      defaultNamespace: 'landing-page',
+      react: { useSuspense: false },// this line
+    },
+
+  };

next.config.mjs

@@ -22,11 +22,14 @@ const nextConfig = {
     }
 
     return config;
-  }
+  },
+  'trailingSlash': true,
+
 };
 
 const mdxConfig = withMDX({
   extension: /\.mdx?$/,
+  providerImportSource: "@mdx-js/react",
   options: {
     remarkPlugins: [frontmatter, gemoji, headingId, slug, images, a11yEmoji, remarkGfm],
     rehypePlugins: []