add back translations + add new overlay

Author: feedthejim

next.config.js

@@ -11,6 +11,7 @@ const nextConfig = {
   experimental: {
     scrollRestoration: true,
     reactCompiler: true,
+    newDevOverlay: true,
   },
 
   env: {},

src/app/[[...markdownPath]]/page.tsx

@@ -9,6 +9,7 @@ import sidebarBlog from '../../sidebarBlog.json';
 import {generateMDX} from '../../utils/generateMDX';
 
 import {RouteItem} from 'components/Layout/getRouteMeta';
+import {LanguageItem} from 'components/MDX/LanguagesContext';
 
 function getActiveSection(pathname: string) {
   if (pathname === '/') {
@@ -110,14 +111,24 @@ export default async function WrapperPage({
   const section = getActiveSection(pathname);
   const routeTree = await getRouteTree(section);
 
+  // Load the list of translated languages conditionally.
+  let languages: Array<LanguageItem> | null = null;
+  if (pathname.endsWith('/translations')) {
+    languages = await (
+      await fetch(
+        'https://raw.githubusercontent.com/reactjs/translations.react.dev/main/langs/langs.json'
+      )
+    ).json(); // { code: string; name: string; enName: string}[]
+  }
+
   // Pass the content and TOC directly, as `getPageContent` should already return them in the correct format
   return (
     <Page
       toc={toc} // Pass the TOC directly without parsing
       routeTree={routeTree as RouteItem}
       meta={meta}
       section={section}
-      languages={null}>
+      languages={languages}>
       {content}
     </Page>
   );