[docs] Replace mdjs with mdx

docs/.babelrc

@@ -8,7 +8,6 @@
         "~": "."
       }
     }],
-    "markdown-in-js/babel",
     "preval"
   ]
 }

docs/.gitignore

@@ -2,5 +2,5 @@
 node_modules
 out/
 
-# These are generated by mdjs
-pages/versions
+# copied in next.config.js
+pages/versions/latest/

docs/README.md

@@ -4,7 +4,7 @@ This is the public documentation for **Expo**, its SDK, client and services.
 
 You can access this documentation online at https://docs.expo.io/. It's built using next.js on top of the https://github.com/zeit/docs codebase.
 
-> **Contributors:** Please make sure that you edit the docs in the `versions/unversioned` directory if you want your changes to apply to the next SDK version too!
+> **Contributors:** Please make sure that you edit the docs in the `pages/versions/unversioned` directory if you want your changes to apply to the next SDK version too!
 
 ### Running Locally
 
@@ -20,36 +20,28 @@ Then `cd` into the `docs` directory and install dependencies with:
 yarn
 ```
 
-Then you need to install babel-cli
-
-```sh
-yarn global add babel-cli
-```
-
 Then you can run the app with (make sure you have no server running on port `3000`):
 
 ```sh
 yarn run dev
 ```
 
-This starts two processes: a `next.js` server, and a compiler/watcher that converts markdown files into javascript pages that `next.js` understands.
-
 Now the documentation is running at http://localhost:3000
 
 ### Running in production mode
 
 ```sh
-yarn run build
-yarn run start
+yarn run export
+yarn run expoer-server
 ```
 
 ### Editing Docs Content
 
-You can find the source of the documentation inside the `versions` directory. Documentation is mostly written in markdown with the help of some React components (for Snack embeds, etc). The routes and navbar are automatically inferred from the directory structure within `versions`.
+You can find the source of the documentation inside the `pages/versions` directory. Documentation is mostly written in markdown with the help of some React components (for Snack embeds, etc). The routes and navbar are automatically inferred from the directory structure within `versions`.
 
 ### Adding Images and Assets
 
-You can add images and assets in the same directory as the markdown file, and you just need to reference them correctly.
+You can add images and assets to the `static` directory.  They'll be served by the production and staging servers at `/static`.
 
 ### New Components
 
@@ -60,26 +52,16 @@ Always try to use the existing components and features in markdown. Create a new
 * You can't have curly brace without quotes: \`{}\` -> `{}`
 * Make sure to leave a empty newline between a table and following content
 
-## Transition from current docs to next.js docs
-
-### Compile process
-
-In both `yarn run start` and `yarn run dev`, we initially compile (see `mdjs` dir) all `.md` files in `versions` to `.js` files under `pages/versions` (which is git-ignored, and never commited). At this point, we also generate the json file `navigation-data.json` for the navbar, and copy images in `versions` to the `static` folder.
-
-In `yarn run dev`, the watcher watches for changes to files in `versions`, and re-compiles as necessary. Note: navigation changes probably won't live-reload so make sure to restart the server.
-
-### Not breaking existing incoming links
-
-`transition/sections.js` is used to figure out which URLs to alias. In order to not break existing URLs such as guides/configuration (the new URL is the more sensible workflow/configuration, automatically inferred from the fact that configuration.md is in the workflow subdir), in next.js, we support both so we need to keep a list of URLs to alias under guides. For future versions, the guides URL for `configuration` won't exist at all so we can slowly phase out this file.
-
 ## A note about versioning
 
 Expo's SDK is versioned so that apps made on old SDKs are still supported
 when new SDKs are relased. The website documents previous SDK versions too.
 
 Version names correspond to directory names under `versions`.
 
-`unversioned` is a special version for the next SDK release.
+`unversioned` is a special version for the next SDK release. It is not included in production output
+
+`latest` is an untracked folder which duplicates the contents of the folder matching the version number in `package.json`.
 
 Sometimes you want to make an edit in version `X` and have that edit also
 be applied in versions `Y, Z, ...` (say, when you're fixing documentation for an
@@ -100,7 +82,7 @@ When we release a new SDK, we copy the `unversioned` directory, and rename it to
 
 Make sure to also grab the upgrade instructions from the release notes blog post and put them in `upgrading-expo-sdk-walkthrough.md`.
 
-That's all you need to do. The `versions` directory is listed on server start to find all available versions. The routes and navbar contents are automatically inferred from the directory structure within `versions`. So, `/versions/v24.0.0/guides/development-mode` refers to `pages/versions/guides/development-mode`.
+That's all you need to do. The `versions` directory is listed on server start to find all available versions. The routes and navbar contents are automatically inferred from the directory structure within `versions`.
 
 Because the navbar is automatically generated from the directory structure, the default ordering of the links under each section is alphabetical. However, for many sections, this is not ideal UX. So, if you wish to override the alphabetical ordering, manipulate page titles in `sidebar-navigation-order.js`.
 

docs/common/fm-loader.js

@@ -0,0 +1,12 @@
+const fm = require('front-matter');
+
+module.exports = async function(src) {
+  const callback = this.async();
+  const { body, attributes } = fm(src);
+
+  const code = `export const meta = ${JSON.stringify(attributes)}
+
+${body}`;
+
+  return callback(null, code);
+};

docs/common/navigation-data.js

@@ -23,7 +23,7 @@ const generateNavLinks = (path_, arr) => {
   let items = fs.readdirSync(path_);
 
   let processUrl = path => {
-    let newPath = path.replace(/^versions/, '/versions').replace(/.md$/, '');
+    let newPath = path.replace(/^pages\/versions/, '/versions').replace(/.mdx?$/, '');
     return newPath;
   };
 
@@ -72,7 +72,7 @@ const generateNavLinks = (path_, arr) => {
   return arr;
 };
 
-const ORIGINAL_PATH_PREFIX = './versions';
+const ORIGINAL_PATH_PREFIX = './pages/versions';
 
 let versionDirectories = fs
   .readdirSync(ORIGINAL_PATH_PREFIX, { withFileTypes: true })

docs/common/translate-markdown.js

@@ -1,7 +1,7 @@
 import { H2, H3, H4 } from '~/components/base/headings';
 import { PDIV, P, Quote } from '~/components/base/paragraph';
 import { UL, OL, LI } from '~/components/base/list';
-import { InlineCode } from '~/components/base/code';
+import { Code, InlineCode } from '~/components/base/code';
 import { ExternalLink } from '~/components/base/link';
 
 import Permalink from '~/components/Permalink';
@@ -22,6 +22,7 @@ export const ol = OL;
 export const h2 = createPermalinkedComponent(H2);
 export const h3 = createPermalinkedComponent(H3);
 export const h4 = createPermalinkedComponent(H4);
-export const code = InlineCode;
+export const code = Code;
+export const inlineCode = InlineCode;
 export const a = ExternalLink;
 export const blockquote = Quote;

docs/common/versions.js

@@ -3,14 +3,14 @@ import Package from '~/package.json';
 const versionDirectories = preval`
   const { readdirSync } = require('fs');
 
-  const versionsContents = readdirSync('./versions', {withFileTypes: true});
+  const versionsContents = readdirSync('./pages/versions', {withFileTypes: true});
 
   module.exports = versionsContents.filter(f => f.isDirectory()).map(f => f.name);
 `;
 
-const VERSIONS = versionDirectories
-  .concat(['latest'])
-  .filter(dir => process.env.NODE_ENV != 'production' || dir != 'unversioned');
+const VERSIONS = versionDirectories.filter(
+  dir => process.env.NODE_ENV != 'production' || dir != 'unversioned'
+);
 
 const LATEST_VERSION =
   typeof window !== 'undefined' && window._LATEST_VERSION

docs/components/base/code.js

@@ -101,9 +101,10 @@ export class Code extends React.Component {
   }
 
   render() {
-    let code = this.props.children;
-    let { lang } = this.props;
-    let html = code.toString();
+    let html = this.props.children.toString();
+    // mdx will add the class `language-foo` to codeblocks with the tag `foo`
+    // if this class is present, we want to slice out `language-`
+    let lang = this.props.className && this.props.className.slice(9).toLowerCase();
     if (lang && !Prism.languages[lang]) {
       try {
         require('prismjs/components/prism-' + lang + '.js');

docs/components/page-higher-order/withDocumentationElements.js

@@ -1,28 +1,24 @@
 import * as React from 'react';
 import GithubSlugger from 'github-slugger';
+import { withRouter } from 'next/router';
+import { MDXProvider } from '@mdx-js/tag';
 
 import DocumentationPage from '~/components/DocumentationPage';
 import { SluggerContext } from '~/components/page-higher-order/withSlugger';
+import * as components from '~/common/translate-markdown';
 
-export default options => {
-  return content => {
+export default meta =>
+  withRouter(
     class DocumentationPageHOC extends React.Component {
-      static async getInitialProps(context) {
-        return { asPath: context.asPath };
-      }
-
       render() {
+        const { router } = this.props;
         return (
-          <DocumentationPage title={options.title} url={this.props.url} asPath={this.props.asPath}>
+          <DocumentationPage title={meta.title} url={router} asPath={router.asPath}>
             <SluggerContext.Provider value={new GithubSlugger()}>
-              {content}
+              <MDXProvider components={components}>{this.props.children}</MDXProvider>
             </SluggerContext.Provider>
           </DocumentationPage>
         );
       }
     }
-
-    return DocumentationPageHOC;
-  };
-};
-
+  );