From 5ab50a12127c19449b32985d70512233e9546312 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 29 Jul 2025 01:39:16 +0200 Subject: [PATCH 1/4] fix: minor mdx component arrangement and type fix --- apps/site/next.mdx.use.client.mjs | 8 ----- apps/site/next.mdx.use.mjs | 9 +++++ apps/site/package.json | 1 + apps/site/tsconfig.json | 1 + packages/ui-components/src/MDX/CodeTabs.tsx | 39 ++++++++++++--------- pnpm-lock.yaml | 5 ++- 6 files changed, 37 insertions(+), 26 deletions(-) diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index b9e0f64d0daa1..8487c3c5b7b6c 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/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 diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index 9942ac7f35e3e..b67817de4e9ff 100644 --- a/apps/site/next.mdx.use.mjs +++ b/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, }; diff --git a/apps/site/package.json b/apps/site/package.json index 60dd897e3f5b2..a4ef652371147 100644 --- a/apps/site/package.json +++ b/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", diff --git a/apps/site/tsconfig.json b/apps/site/tsconfig.json index 8b985a1ab27fc..97fdc96bc59e0 100644 --- a/apps/site/tsconfig.json +++ b/apps/site/tsconfig.json @@ -17,6 +17,7 @@ "plugins": [{ "name": "next" }], "baseUrl": "." }, + "mdx": { "checkMdx": true }, "include": [ "next-env.d.ts", "global.d.ts", diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx index ab565767aa303..d58bf76f1c85b 100644 --- a/packages/ui-components/src/MDX/CodeTabs.tsx +++ b/packages/ui-components/src/MDX/CodeTabs.tsx @@ -1,5 +1,5 @@ import * as TabsPrimitive from '@radix-ui/react-tabs'; -import type { FC, ReactElement } from 'react'; +import { useMemo, type FC, type ReactElement } from 'react'; import CodeTabs from '#ui/Common/CodeTabs'; @@ -21,27 +21,32 @@ const MDXCodeTabs: FC = ({ defaultTab = '0', ...props }) => { - const languages = rawLanguages.split('|'); - const displayNames = rawDisplayNames?.split('|') ?? []; - const occurrences: Record = {}; - const tabs = languages.map((language, index) => { - const base = - displayNames[index]?.trim() || - NAME_OVERRIDES[language] || - language.toUpperCase(); + const { tabs, languages } = useMemo(() => { + 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 count = occurrences[base] ?? 0; + + occurrences[base] = count + 1; - const count = occurrences[base] ?? 0; - occurrences[base] = count + 1; + const label = count > 0 ? `${base} (${count + 1})` : base; - const label = count > 0 ? `${base} (${count + 1})` : base; + return { + key: `${language}-${index}`, + label: label, + }; + }); - return { - key: `${language}-${index}`, - label: label, - }; - }); + return { tabs, languages }; + }, [rawLanguages, rawDisplayNames]); return ( Date: Tue, 29 Jul 2025 12:29:38 +0200 Subject: [PATCH 2/4] Update CodeTabs.tsx Signed-off-by: Claudio Wunder --- packages/ui-components/src/MDX/CodeTabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx index d58bf76f1c85b..8a79c83631445 100644 --- a/packages/ui-components/src/MDX/CodeTabs.tsx +++ b/packages/ui-components/src/MDX/CodeTabs.tsx @@ -21,9 +21,9 @@ const MDXCodeTabs: FC = ({ defaultTab = '0', ...props }) => { - const occurrences: Record = {}; - const { tabs, languages } = useMemo(() => { + const occurrences: Record = {}; + const languages = rawLanguages.split('|'); const displayNames = rawDisplayNames?.split('|') ?? []; From e2439d1daef1066b8ae4c28280aa92483760070a Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 29 Jul 2025 12:30:25 +0200 Subject: [PATCH 3/4] Update CodeTabs.tsx Signed-off-by: Claudio Wunder --- packages/ui-components/src/MDX/CodeTabs.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx index 8a79c83631445..5e5c2c09dce43 100644 --- a/packages/ui-components/src/MDX/CodeTabs.tsx +++ b/packages/ui-components/src/MDX/CodeTabs.tsx @@ -1,5 +1,6 @@ import * as TabsPrimitive from '@radix-ui/react-tabs'; -import { useMemo, type FC, type ReactElement } from 'react'; +import type { FC, ReactElement } from 'react'; +import { useMemo } from 'react'; import CodeTabs from '#ui/Common/CodeTabs'; From d43e791991e2e6c9c9d35061c6655592f18c7c9f Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 29 Jul 2025 12:40:26 +0200 Subject: [PATCH 4/4] chore: style fix --- packages/ui-components/src/MDX/CodeTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx index 5e5c2c09dce43..517bf13404969 100644 --- a/packages/ui-components/src/MDX/CodeTabs.tsx +++ b/packages/ui-components/src/MDX/CodeTabs.tsx @@ -24,7 +24,7 @@ const MDXCodeTabs: FC = ({ }) => { const { tabs, languages } = useMemo(() => { const occurrences: Record = {}; - + const languages = rawLanguages.split('|'); const displayNames = rawDisplayNames?.split('|') ?? [];