wip(shared): Taking MDX out of webpack bundle

sites/org/pages/docs/[...slug].mjs

@@ -3,56 +3,62 @@ import { nsMerge } from 'shared/utils.mjs'
 import { pages } from 'site/prebuild/docs.en.mjs'
 // Dependencies
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-// Hooks
-import { useCallback } from 'react'
-import { useDynamicMdx } from 'shared/hooks/use-dynamic-mdx.mjs'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
 import { DocsLayout, ns as layoutNs } from 'site/components/layouts/docs.mjs'
-import { loaders } from 'shared/components/dynamic-docs/org.mjs'
+// MDX without webpack
+import { mdxLoader } from 'shared/mdx/loader.mjs'
 
 export const ns = nsMerge(pageNs, layoutNs, 'designs', 'account', 'tags')
 
 /**
- * a page to display documentation markdown
+ * A page to display documentation markdown
  * Each page MUST be wrapped in the PageWrapper component.
  * You also MUST spread props.page into this wrapper component
  * when path and locale come from static props (as here)
  * or set them manually.
  */
-export const Page = ({ page, locale, frontmatter, MDX }) => (
+const Page = ({ page, locale, intro, frontmatter, mdx, mdxSlug }) => (
   <PageWrapper
     {...page}
     locale={locale}
     title={frontmatter.title}
+    intro={intro}
     layout={(props) => <DocsLayout {...props} {...{ slug: page.path.join('/'), frontmatter }} />}
   >
-    <MdxWrapper>{MDX}</MdxWrapper>
+    <pre>{JSON.stringify(frontmatter, null, 2)}</pre>
+    <MdxWrapper mdx={mdx} site="org" slug={mdxSlug} />
   </PageWrapper>
 )
 
-const DocsPage = ({ page, locale, slug }) => {
-  // get the appropriate loader for the locale, and load the mdx for this page
-  const loader = useCallback(() => loaders[locale](slug), [locale, slug])
-  // State
-  const { frontmatter, MDX } = useDynamicMdx(loader)
-
-  return <Page {...{ page, slug, frontmatter, MDX, locale }} />
-}
-
-export default DocsPage
+export default Page
 
 /*
  * getStaticProps() is used to fetch data at build-time.
  * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
  */
 export async function getStaticProps({ locale, params }) {
+  /*
+   * Load mdx from disk and keep it out of the webpack bundle or your computer will melt
+   * not to mention builds will be slow and often run into the resource limits set by Vercel
+   */
+  const { mdx, intro, frontmatter } = await mdxLoader(
+    locale,
+    'org',
+    `docs/${params.slug.join('/')}`,
+    {}
+  )
+
   return {
     props: {
       ...(await serverSideTranslations('en', ns)),
       slug: params.slug.join('/'),
+      mdxSlug: params.slug,
       locale,
+      mdx,
+      intro,
+      frontmatter,
       page: {
         locale,
         path: ['docs', ...params.slug],