fix: minor mdx component arrangement and type fix (#8041)

* fix: minor mdx component arrangement and type fix

* Update CodeTabs.tsx

Signed-off-by: Claudio Wunder <[email protected]>

* Update CodeTabs.tsx

Signed-off-by: Claudio Wunder <[email protected]>

* chore: style fix

---------

Signed-off-by: Claudio Wunder <[email protected]>

Author: ovflowd

apps/site/next.mdx.use.client.mjs

@@ -3,7 +3,6 @@
 import Blockquote from '@node-core/ui-components/Common/Blockquote';
 import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs';
 
-import Button from './components/Common/Button';
 import DownloadButton from './components/Downloads/DownloadButton';
 import DownloadLink from './components/Downloads/DownloadLink';
 import BlogPostLink from './components/Downloads/Release/BlogPostLink';
@@ -17,7 +16,6 @@ import ReleasePrebuiltDownloadButtons from './components/Downloads/Release/Prebu
 import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
 import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdown';
 import Link from './components/Link';
-import LinkWithArrow from './components/LinkWithArrow';
 import MDXCodeBox from './components/MDX/CodeBox';
 import MDXImage from './components/MDX/Image';
 import { ReleaseProvider } from './providers/releaseProvider';
@@ -30,12 +28,6 @@ import { ReleaseProvider } from './providers/releaseProvider';
 export const clientMdxComponents = {
   // Renders MDX CodeTabs
   CodeTabs: MDXCodeTabs,
-  // Renders a Button Component for `button` tags
-  Button: Button,
-  // Links with External Arrow
-  LinkWithArrow: LinkWithArrow,
-  // Regular links (without arrow)
-  Link: Link,
   // Renders a Download Button
   DownloadButton: DownloadButton,
   // Renders a Download Link

apps/site/next.mdx.use.mjs

@@ -2,7 +2,10 @@
 
 import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
 
+import Button from './components/Common/Button';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
+import Link from './components/Link';
+import LinkWithArrow from './components/LinkWithArrow';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
 import WithBanner from './components/withBanner';
@@ -25,4 +28,10 @@ export const mdxComponents = {
   BadgeGroup,
   // Renders an container for Upcoming Node.js Meetings
   UpcomingMeetings,
+  // Renders a Button Component for `button` tags
+  Button,
+  // Regular links (without arrow)
+  Link,
+  // Links with External Arrow
+  LinkWithArrow,
 };

apps/site/package.json

@@ -82,6 +82,7 @@
     "@opennextjs/cloudflare": "^1.6.0",
     "@playwright/test": "^1.54.1",
     "@testing-library/user-event": "~14.6.1",
+    "@types/mdx": "^2.0.13",
     "@types/semver": "~7.7.0",
     "eslint-config-next": "15.4.3",
     "eslint-import-resolver-typescript": "~4.4.4",

apps/site/tsconfig.json

@@ -17,6 +17,7 @@
     "plugins": [{ "name": "next" }],
     "baseUrl": "."
   },
+  "mdx": { "checkMdx": true },
   "include": [
     "next-env.d.ts",
     "global.d.ts",

packages/ui-components/src/MDX/CodeTabs.tsx

@@ -1,5 +1,6 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { FC, ReactElement } from 'react';
+import { useMemo } from 'react';
 
 import CodeTabs from '#ui/Common/CodeTabs';
 
@@ -21,27 +22,32 @@ const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
   defaultTab = '0',
   ...props
 }) => {
-  const languages = rawLanguages.split('|');
-  const displayNames = rawDisplayNames?.split('|') ?? [];
+  const { tabs, languages } = useMemo(() => {
+    const occurrences: Record<string, number> = {};
 
-  const occurrences: Record<string, number> = {};
+    const languages = rawLanguages.split('|');
+    const displayNames = rawDisplayNames?.split('|') ?? [];
 
-  const tabs = languages.map((language, index) => {
-    const base =
-      displayNames[index]?.trim() ||
-      NAME_OVERRIDES[language] ||
-      language.toUpperCase();
+    const tabs = languages.map((language, index) => {
+      const base =
+        displayNames[index]?.trim() ||
+        NAME_OVERRIDES[language] ||
+        language.toUpperCase();
 
-    const count = occurrences[base] ?? 0;
-    occurrences[base] = count + 1;
+      const count = occurrences[base] ?? 0;
 
-    const label = count > 0 ? `${base} (${count + 1})` : base;
+      occurrences[base] = count + 1;
 
-    return {
-      key: `${language}-${index}`,
-      label: label,
-    };
-  });
+      const label = count > 0 ? `${base} (${count + 1})` : base;
+
+      return {
+        key: `${language}-${index}`,
+        label: label,
+      };
+    });
+
+    return { tabs, languages };
+  }, [rawLanguages, rawDisplayNames]);
 
   return (
     <CodeTabs