[Beta] Move from MDX loader to getStaticPaths (#4990)

* Move Markdown from src/pages to src/content

* Use getStaticProps

* Fix Fast Refresh

* Clean up

* rm unused

* Fixes

beta/next.config.js

@@ -64,22 +64,6 @@ const nextConfig = {
       })
     );
 
-    // Add our custom markdown loader in order to support frontmatter
-    // and layout
-    config.module.rules.push({
-      test: /.mdx?$/, // load both .md and .mdx files
-      use: [
-        options.defaultLoaders.babel,
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            remarkPlugins,
-          },
-        },
-        path.join(__dirname, './plugins/md-layout-loader'),
-      ],
-    });
-
     return config;
   },
 };

beta/package.json

@@ -5,7 +5,7 @@
   "license": "CC",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "dev": "next",
+    "dev": "next-remote-watch ./src/content",
     "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
@@ -34,6 +34,7 @@
     "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "12.1.7-canary.11",
+    "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "0.0.0-experimental-82c64e1a4-20220520",
     "react-collapsed": "3.1.0",
@@ -41,7 +42,10 @@
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
-    "@mdx-js/loader": "^1.6.16",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@mdx-js/mdx": "^1.6.22",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/debounce": "^1.2.1",

beta/patches/next-remote-watch+1.0.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch
+index c055b66..a2f749c 100755
+--- a/node_modules/next-remote-watch/bin/next-remote-watch
++++ b/node_modules/next-remote-watch/bin/next-remote-watch
+@@ -66,7 +66,10 @@ app.prepare().then(() => {
+             }
+           }
+ 
+-          app.server.hotReloader.send('reloadPage')
++          app.server.hotReloader.send({
++            event: 'serverOnlyChanges',
++            pages: ['/[[...markdownPath]]']
++          });
+         }
+       )
+   }

beta/plugins/md-layout-loader.js

@@ -1,30 +0,0 @@
-const fm = require('gray-matter');
-const path = require('path');
-
-// Makes mdx in next.js suck less by injecting necessary exports so that
-// the docs are still readable on github.
-//
-// Layout component for a .mdx or .md page can be specfied in the frontmatter.
-// This plugin assumes that the layout file and named export are the same. This
-// easily changed by modifying the string below.
-//
-// All metadata can be written in yaml front matter. It will be passed to the
-// layout component as `meta` prop.
-//
-// (Shamelessly stolen from Expo.io docs)
-// @see https://github.com/expo/expo/blob/master/docs/common/md-loader.js
-module.exports = async function (src) {
-  const callback = this.async();
-  const {content, data} = fm(src);
-  const pageParentDir = path
-    .dirname(path.relative('./src/pages', this.resourcePath))
-    .split(path.sep)
-    .shift();
-  const code =
-    `export const layout = {
-  section: '${pageParentDir}',
-  meta: ${JSON.stringify(data)}
-};\n
-` + content;
-  return callback(null, code);
-};

beta/src/components/Layout/Feedback.tsx

@@ -7,9 +7,9 @@ import {useRouter} from 'next/router';
 import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
-  const {pathname} = useRouter();
+  const {asPath} = useRouter();
   // Reset on route changes.
-  return <SendFeedback key={pathname} onSubmit={onSubmit} />;
+  return <SendFeedback key={asPath} onSubmit={onSubmit} />;
 }
 
 const thumbsUpIcon = (

beta/src/components/Layout/Nav/MobileNav.tsx

@@ -6,27 +6,22 @@ import * as React from 'react';
 import cn from 'classnames';
 import {RouteItem} from 'components/Layout/useRouteMeta';
 import {useRouter} from 'next/router';
+import {useActiveSection} from 'hooks/useActiveSection';
 import {SidebarRouteTree} from '../Sidebar';
 import sidebarHome from '../../../sidebarHome.json';
 import sidebarLearn from '../../../sidebarLearn.json';
 import sidebarReference from '../../../sidebarReference.json';
 
-function inferSection(pathname: string): 'learn' | 'apis' | 'home' {
-  if (pathname.startsWith('/learn')) {
-    return 'learn';
-  } else if (pathname.startsWith('/apis')) {
-    return 'apis';
-  } else {
-    return 'home';
-  }
-}
-
 export function MobileNav() {
-  const {pathname} = useRouter();
+  // This is where we actually are according to the router.
-  const [section, setSection] = React.useState(() => inferSection(pathname));
+  const section = useActiveSection();
+
+  // Let the user switch tabs there and back without navigating.
+  // Seed the tab state from the router, but keep it independent.
+  const [tab, setTab] = React.useState(section);
 
   let tree = null;
-  switch (section) {
+  switch (tab) {
     case 'home':
       tree = sidebarHome.routes[0];
       break;
@@ -41,19 +36,13 @@ export function MobileNav() {
   return (
     <>
       <div className="sticky top-0 px-5 mb-2 bg-wash dark:bg-wash-dark flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
-        <TabButton
+        <TabButton isActive={tab === 'home'} onClick={() => setTab('home')}>
-          isActive={section === 'home'}
-          onClick={() => setSection('home')}>
           Home
         </TabButton>
-        <TabButton
+        <TabButton isActive={tab === 'learn'} onClick={() => setTab('learn')}>
-          isActive={section === 'learn'}
-          onClick={() => setSection('learn')}>
           Learn
         </TabButton>
-        <TabButton
+        <TabButton isActive={tab === 'apis'} onClick={() => setTab('apis')}>
-          isActive={section === 'apis'}
-          onClick={() => setSection('apis')}>
           API
         </TabButton>
       </div>

beta/src/components/Layout/Nav/Nav.tsx

@@ -11,6 +11,7 @@ import {IconClose} from 'components/Icon/IconClose';
 import {IconHamburger} from 'components/Icon/IconHamburger';
 import {Search} from 'components/Search';
 import {MenuContext} from 'components/useMenu';
+import {useActiveSection} from 'hooks/useActiveSection';
 
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
@@ -86,22 +87,11 @@ const lightIcon = (
   </svg>
 );
 
-function inferSection(pathname: string): 'learn' | 'apis' | 'home' {
-  if (pathname.startsWith('/learn')) {
-    return 'learn';
-  } else if (pathname.startsWith('/apis')) {
-    return 'apis';
-  } else {
-    return 'home';
-  }
-}
-
 export default function Nav() {
-  const {pathname} = useRouter();
   const {isOpen, toggleOpen} = React.useContext(MenuContext);
   const [showFeedback, setShowFeedback] = React.useState(false);
   const feedbackAutohideRef = React.useRef<any>(null);
-  const section = inferSection(pathname);
+  const section = useActiveSection();
   const feedbackPopupRef = React.useRef<null | HTMLDivElement>(null);
 
   React.useEffect(() => {

beta/src/components/Layout/Page.tsx

@@ -4,17 +4,33 @@
 
 import {MenuProvider} from 'components/useMenu';
 import * as React from 'react';
+import {useRouter} from 'next/router';
 import {Nav} from './Nav';
 import {RouteItem, SidebarContext} from './useRouteMeta';
+import {useActiveSection} from 'hooks/useActiveSection';
 import {Sidebar} from './Sidebar';
 import {Footer} from './Footer';
 import SocialBanner from '../SocialBanner';
+import sidebarHome from '../../sidebarHome.json';
+import sidebarLearn from '../../sidebarLearn.json';
+import sidebarReference from '../../sidebarReference.json';
+
 interface PageProps {
   children: React.ReactNode;
-  routeTree: RouteItem;
 }
 
-export function Page({routeTree, children}: PageProps) {
+export function Page({children}: PageProps) {
+  const {query, asPath} = useRouter();
+  const section = useActiveSection();
+  let routeTree = sidebarHome as RouteItem;
+  switch (section) {
+    case 'apis':
+      routeTree = sidebarReference as RouteItem;
+      break;
+    case 'learn':
+      routeTree = sidebarLearn as RouteItem;
+      break;
+  }
   return (
     <>
       <SocialBanner />
@@ -31,7 +47,9 @@ export function Page({routeTree, children}: PageProps) {
               <div className="flex flex-1 w-full h-full self-stretch">
                 <div className="w-full min-w-0">
                   <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
-                    <article className="h-full mx-auto relative w-full min-w-0">
+                    <article
+                      key={asPath}
+                      className="h-full mx-auto relative w-full min-w-0">
                       {children}
                     </article>
                     <Footer />

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -77,10 +77,10 @@ export function SidebarRouteTree({
   level = 0,
 }: SidebarRouteTreeProps) {
   const {breadcrumbs} = useRouteMeta(routeTree);
-  const {pathname} = useRouter();
+  const cleanedPath = useRouter().asPath.split('?')[0];
   const pendingRoute = usePendingRoute();
 
-  const slug = pathname;
+  const slug = cleanedPath;
   const currentRoutes = routeTree.routes as RouteItem[];
   const expandedPath = currentRoutes.reduce(
     (acc: string | undefined, curr: RouteItem) => {
@@ -89,8 +89,8 @@ export function SidebarRouteTree({
       if (breadcrumb) {
         return curr.path;
       }
-      if (curr.path === pathname) {
+      if (curr.path === cleanedPath) {
-        return pathname;
+        return cleanedPath;
       }
       return undefined;
     },

beta/src/components/Layout/useRouteMeta.tsx

@@ -57,12 +57,12 @@ export function useRouteMeta(rootRoute?: RouteItem) {
   const sidebarContext = React.useContext(SidebarContext);
   const routeTree = rootRoute || sidebarContext;
   const router = useRouter();
-  const cleanedPath = router.pathname;
+  if (router.pathname === '/404') {
-  if (cleanedPath === '/404') {
     return {
       breadcrumbs: [],
     };
   }
+  const cleanedPath = router.asPath.split('?')[0];
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
   return {
     ...getRouteMeta(cleanedPath, routeTree),

beta/src/components/MDX/MDXComponents.tsx

@@ -297,6 +297,12 @@ export const MDXComponents = {
   }) => <ExpandableExample {...props} type="DeepDive" />,
   Diagram,
   DiagramGroup,
+  FullWidth({children}: {children: any}) {
+    return children;
+  },
+  MaxWidth({children}: {children: any}) {
+    return <div className="max-w-4xl ml-0 2xl:mx-auto">{children}</div>;
+  },
   Gotcha,
   Wip,
   HomepageHero,

beta/src/components/Seo.tsx

@@ -39,7 +39,7 @@ export const Seo = withRouter(
       <meta
         property="og:url"
         key="og:url"
-        content={`https://beta.reactjs.org${router.pathname}`}
+        content={`https://beta.reactjs.org${router.asPath.split('?')[0]}`}
       />
       {title != null && (
         <meta property="og:title" content={title} key="og:title" />

beta/src/components/useMenu.tsx

@@ -48,7 +48,7 @@ export const useMenu = () => {
     return () => {
       clearAllBodyScrollLocks();
     };
-  }, [router.pathname, hideSidebar]);
+  }, [router.asPath, hideSidebar]);
 
   // Avoid top-level context re-renders
   return React.useMemo(