Merge branch 'fix/8048-keyboard-accessible-details-button' of https://github.com/mohit5upadhyay/nodejs.org into fix/8048-keyboard-accessible-details-button

Author: avivkeller

.github/workflows/playwright-cloudflare-open-next.yml

@@ -51,6 +51,12 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
+      - name: Downgrade Next.js
+        # Open-next does not yet support next@15.4, so temporarily in order to have
+        # this workflow working we force install the latest Next.js 15.3 version instead
+        run: pnpm i next@15.3.2
+        working-directory: apps/site
+
       - name: Get Playwright version
         id: playwright-version
         working-directory: apps/site

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

@@ -30,12 +30,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

@@ -36,10 +36,10 @@
     "@node-core/ui-components": "workspace:*",
     "@node-core/website-i18n": "workspace:*",
     "@nodevu/core": "0.3.0",
-    "@opentelemetry/api-logs": "~0.202.0",
-    "@opentelemetry/instrumentation": "~0.202.0",
+    "@opentelemetry/api-logs": "~0.203.0",
+    "@opentelemetry/instrumentation": "~0.203.0",
     "@opentelemetry/resources": "~1.30.1",
-    "@opentelemetry/sdk-logs": "~0.202.0",
+    "@opentelemetry/sdk-logs": "~0.203.0",
     "@orama/react-components": "^0.8.1",
     "@oramacloud/client": "^2.1.4",
     "@radix-ui/react-tabs": "^1.1.12",
@@ -56,7 +56,7 @@
     "feed": "~5.1.0",
     "github-slugger": "~2.0.0",
     "gray-matter": "~4.0.3",
-    "next": "15.4.3",
+    "next": "15.4.4",
     "next-intl": "~4.3.4",
     "next-themes": "~0.4.6",
     "postcss-calc": "~10.1.1",
@@ -76,11 +76,12 @@
   "devDependencies": {
     "@eslint/compat": "~1.3.1",
     "@eslint/eslintrc": "~3.3.1",
-    "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.0",
-    "@next/eslint-plugin-next": "15.3.4",
+    "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.1",
+    "@next/eslint-plugin-next": "15.4.4",
     "@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/pages/en/blog/release/v22.18.0.md

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

apps/site/pages/en/blog/release/v24.5.0.md

@@ -36,7 +36,7 @@
   "dependencies": {
     "husky": "9.1.7",
     "lint-staged": "16.1.2",
-    "turbo": "2.5.4"
+    "turbo": "2.5.5"
   },
   "devDependencies": {
     "@eslint/js": "~9.31.0",

apps/site/tsconfig.json

@@ -2,7 +2,6 @@
 
 .badge {
   @apply rounded-full
-    border
     text-center
     text-white;
 
@@ -19,32 +18,22 @@
   }
 
   &.default {
-    @apply border-green-200
-      bg-green-600
-      dark:border-green-800;
+    @apply bg-green-600;
   }
 
   &.error {
-    @apply border-danger-200
-      bg-danger-600
-      dark:border-danger-800;
+    @apply bg-danger-600;
   }
 
   &.warning {
-    @apply border-warning-200
-      bg-warning-600
-      dark:border-warning-600;
+    @apply bg-warning-600;
   }
 
   &.info {
-    @apply border-info-200
-      bg-info-600
-      dark:border-info-800;
+    @apply bg-info-600;
   }
 
   &.neutral {
-    @apply border-neutral-200
-      bg-neutral-600
-      dark:border-neutral-800;
+    @apply bg-neutral-600;
   }
 }

package.json

@@ -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