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

@@ -39,7 +39,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;
 
@@ -175,164 +175,161 @@ function Text({ content = '', className = '' }) {
 /**
  * @description This function returns MDX components.
  */
-export function getMDXComponents() {
-  return {
-    h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h1
-        {...props}
-        className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
-      />
-    ),
-    h2: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h2
-        {...props}
-        className={`${props.className || ''} mb-4 mt-6 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
-      />
-    ),
-    h3: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h3
-        {...props}
-        className={`${props.className || ''} mb-4 mt-6 font-heading text-lg font-medium tracking-heading text-gray-900 antialiased`}
-      />
-    ),
-    h4: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h4
-        {...props}
-        className={`${props.className || ''} text-md my-4 font-heading font-medium text-gray-900 antialiased`}
-      />
-    ),
-    h5: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h5 {...props} className={`${props.className || ''} text-md my-4 font-heading font-bold antialiased`} />
-    ),
-    h6: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h6
-        {...props}
-        className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase text-gray-900 antialiased`}
-      />
-    ),
-    blockquote: (props: React.HTMLProps<HTMLQuoteElement>) => (
-      <blockquote
-        {...props}
-        className={`${props.className || ''} my-4 border-l-4 border-gray-400 bg-white py-1 pl-4 pr-1 font-body italic text-gray-700 antialiased`}
-      />
-    ),
-    p: (props: React.HTMLProps<HTMLParagraphElement>) => (
-      <p {...props} className={`${props.className || ''} my-4 font-body font-regular text-gray-700 antialiased`} />
-    ),
-    strong: (props: React.HTMLProps<HTMLSpanElement>) => (
-      <strong
-        {...props}
-        className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 antialiased`}
-      />
-    ),
-    a: (props: React.HTMLProps<HTMLAnchorElement>) => (
-      <a
-        {...props}
-        className={`${props.className || 'border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'} font-body antialiased`}
-      />
-    ),
-    ul: (props: React.HTMLProps<HTMLUListElement>) => (
-      <ul
-        {...props}
-        className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body text-gray-700 antialiased`}
-      />
-    ),
-    ol: (props: React.HTMLProps<HTMLOListElement>) => (
-      <ol
-        {...props}
-        className={`${props.className || ''} font-normal my-4 ml-4 list-decimal font-body text-gray-700 antialiased`}
-        type='1'
-      />
-    ),
-    li: (props: React.HTMLProps<HTMLLIElement>) => (
-      <li
-        {...props}
-        className={`${props.className || ''} my-3 font-body font-regular tracking-tight text-gray-700 antialiased`}
-      />
-    ),
-    button: Button as React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>,
-    table: (props: React.HTMLProps<HTMLTableElement>) => (
-      <div className={`${props.className || ''} flex flex-col`}>
-        <div className='my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8'>
-          <div className='inline-block w-full overflow-auto border-b border-gray-200 align-middle shadow sm:rounded-lg'>
-            <table {...props} className={`${props.className || ''} w-full`} />
-          </div>
+const getMDXComponents = {
+  h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h1
+      {...props}
+      className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
+    />
+  ),
+  h2: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h2
+      {...props}
+      className={`${props.className || ''} mb-4 mt-6 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
+    />
+  ),
+  h3: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h3
+      {...props}
+      className={`${props.className || ''} mb-4 mt-6 font-heading text-lg font-medium tracking-heading text-gray-900 antialiased`}
+    />
+  ),
+  h4: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h4
+      {...props}
+      className={`${props.className || ''} text-md my-4 font-heading font-medium text-gray-900 antialiased`}
+    />
+  ),
+  h5: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h5 {...props} className={`${props.className || ''} text-md my-4 font-heading font-bold antialiased`} />
+  ),
+  h6: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h6
+      {...props}
+      className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase text-gray-900 antialiased`}
+    />
+  ),
+  blockquote: (props: React.HTMLProps<HTMLQuoteElement>) => (
+    <blockquote
+      {...props}
+      className={`${props.className || ''} my-4 border-l-4 border-gray-400 bg-white py-1 pl-4 pr-1 font-body italic text-gray-700 antialiased`}
+    />
+  ),
+  p: (props: React.HTMLProps<HTMLParagraphElement>) => (
+    <p {...props} className={`${props.className || ''} my-4 font-body font-regular text-gray-700 antialiased`} />
+  ),
+  strong: (props: React.HTMLProps<HTMLSpanElement>) => (
+    <strong {...props} className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 antialiased`} />
+  ),
+  a: (props: React.HTMLProps<HTMLAnchorElement>) => (
+    <a
+      {...props}
+      className={`${props.className || 'border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'} font-body antialiased`}
+    />
+  ),
+  ul: (props: React.HTMLProps<HTMLUListElement>) => (
+    <ul
+      {...props}
+      className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body text-gray-700 antialiased`}
+    />
+  ),
+  ol: (props: React.HTMLProps<HTMLOListElement>) => (
+    <ol
+      {...props}
+      className={`${props.className || ''} font-normal my-4 ml-4 list-decimal font-body text-gray-700 antialiased`}
+      type='1'
+    />
+  ),
+  li: (props: React.HTMLProps<HTMLLIElement>) => (
+    <li
+      {...props}
+      className={`${props.className || ''} my-3 font-body font-regular tracking-tight text-gray-700 antialiased`}
+    />
+  ),
+  button: Button as React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>,
+  table: (props: React.HTMLProps<HTMLTableElement>) => (
+    <div className={`${props.className || ''} flex flex-col`}>
+      <div className='my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8'>
+        <div className='inline-block w-full overflow-auto border-b border-gray-200 align-middle shadow sm:rounded-lg'>
+          <table {...props} className={`${props.className || ''} w-full`} />
         </div>
       </div>
-    ),
-    th: (props: React.HTMLProps<HTMLTableCellElement>) => (
-      <th
-        {...props}
-        className={`${props.className || ''} border-b border-gray-200 bg-gray-100 px-6 py-3 text-left font-body text-xs font-medium uppercase leading-4 tracking-wider text-gray-900`}
-      />
-    ),
-    tr: (props: React.HTMLProps<HTMLTableRowElement>) => (
-      <tr {...props} className={`${props.className || ''} bg-white`} />
-    ),
-    td: (props: React.HTMLProps<HTMLTableCellElement>) => (
-      <td
-        {...props}
-        className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
-      />
-    ),
-    pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
-    code: (props: React.HTMLProps<HTMLElement>) => (
-      <code
-        {...props}
-        className={`${props.className || ''} rounded bg-gray-200 px-1 py-0.5 font-mono text-sm text-gray-800`}
-      />
-    ),
-    hr: (props: React.HTMLProps<HTMLHRElement>) => <hr {...props} className={`${props.className || ''} my-8`} />,
-    Link: (props: React.HTMLProps<HTMLHRElement>) => (
-      <Link
-        href={props.href || '/'}
-        className='border-b border-secondary-400 font-body font-semibold text-gray-900 antialiased transition duration-300 ease-in-out hover:border-secondary-500'
-      >
-        {props.children}
-      </Link>
-    ),
-    Tr: TableRow,
-    Td: TableCell,
-    Th: TableHeader,
-    Table,
-    Asyncapi3ChannelComparison,
-    Asyncapi3IdAndAddressComparison,
-    Asyncapi3MetaComparison,
-    Asyncapi3OperationComparison,
-    Asyncapi3ParameterComparison,
-    Asyncapi3SchemaFormatComparison,
-    Asyncapi3ServerComparison,
-    CodeBlock,
-    ChapterSuggestions,
-    YouTube,
-    Remember,
-    Text,
-    Warning,
-    Sponsors,
-    FAQ,
-    Caption,
-    Row,
-    Column,
-    Figure,
-    DocsCards,
-    GeneratorInstallation,
-    NewsletterSubscribe,
-    TwitterTimelineEmbed,
-    TwitterShareButton,
-    TwitterFollowButton,
-    TwitterHashtagButton,
-    TwitterMentionButton,
-    TwitterTweetEmbed,
-    TwitterMomentShare,
-    TwitterDMButton,
-    TwitterVideoEmbed,
-    TwitterOnAirButton,
-    Profiles,
-    Visualizer
-  };
-}
+    </div>
+  ),
+  th: (props: React.HTMLProps<HTMLTableCellElement>) => (
+    <th
+      {...props}
+      className={`${props.className || ''} border-b border-gray-200 bg-gray-100 px-6 py-3 text-left font-body text-xs font-medium uppercase leading-4 tracking-wider text-gray-900`}
+    />
+  ),
+  tr: (props: React.HTMLProps<HTMLTableRowElement>) => (
+    <tr {...props} className={`${props.className || ''} bg-white`} />
+  ),
+  td: (props: React.HTMLProps<HTMLTableCellElement>) => (
+    <td
+      {...props}
+      className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
+    />
+  ),
+  pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
+  code: (props: React.HTMLProps<HTMLElement>) => (
+    <code
+      {...props}
+      className={`${props.className || ''} rounded bg-gray-200 px-1 py-0.5 font-mono text-sm text-gray-800`}
+    />
+  ),
+  hr: (props: React.HTMLProps<HTMLHRElement>) => <hr {...props} className={`${props.className || ''} my-8`} />,
+  Link: (props: React.HTMLProps<HTMLHRElement>) => (
+    <Link
+      href={props.href || '/'}
+      className='border-b border-secondary-400 font-body font-semibold text-gray-900 antialiased transition duration-300 ease-in-out hover:border-secondary-500'
+    >
+      {props.children}
+    </Link>
+  ),
+  Tr: TableRow,
+  Td: TableCell,
+  Th: TableHeader,
+  Tbody: TableBody,
+  Thead,
+  Table,
+  Asyncapi3ChannelComparison,
+  Asyncapi3IdAndAddressComparison,
+  Asyncapi3MetaComparison,
+  Asyncapi3OperationComparison,
+  Asyncapi3ParameterComparison,
+  Asyncapi3SchemaFormatComparison,
+  Asyncapi3ServerComparison,
+  CodeBlock,
+  ChapterSuggestions,
+  YouTube,
+  Remember,
+  Text,
+  Warning,
+  Sponsors,
+  Caption,
+  Row,
+  Column,
+  Figure,
+  FAQ,
+  DocsCards,
+  GeneratorInstallation,
+  NewsletterSubscribe,
+  TwitterTimelineEmbed,
+  TwitterShareButton,
+  TwitterFollowButton,
+  TwitterHashtagButton,
+  TwitterMentionButton,
+  TwitterTweetEmbed,
+  TwitterMomentShare,
+  TwitterDMButton,
+  TwitterVideoEmbed,
+  TwitterOnAirButton,
+  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

@@ -1,11 +1,11 @@
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
-import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
 import InputBox from './InputBox';
 import Loader from './Loader';

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;