get data extraction working

beta/next.config.js

@@ -52,6 +52,7 @@ module.exports = {
             remarkPlugins,
           },
         },
+        path.join(__dirname, './plugins/md-layout-preloader'),
       ],
     });
 

beta/plugins/md-layout-loader.js

@@ -1,17 +1,9 @@
-const fm = require('gray-matter');
-const path = require('path');
-
-const layouts = {
-  apis: 'LayoutAPI',
-  learn: 'LayoutLearn',
-};
-
 module.exports = async function (src) {
   const callback = this.async();
   const code = `
   import * as AllComponents from 'components_new/AllComponents.server';
   global.COMPONENTS = AllComponents;
-  ${src}
+  ${src.replace('const layoutProps = {', 'const layoutProps = { data,')}
   `;
   return callback(null, code);
 };

beta/plugins/md-layout-preloader.js

@@ -0,0 +1,11 @@
+const fm = require('gray-matter');
+
+module.exports = async function (src) {
+  const callback = this.async();
+  const {content, data} = fm(src);
+  const code = `
+export const data = ${JSON.stringify(data)};
+  ${content}
+  `;
+  return callback(null, code);
+};

beta/src/components_new/AllComponents.server.js

@@ -1,17 +1,28 @@
 import Link from './Link.client';
+import LayoutAPI from './LayoutAPI.server';
+import LayoutLearn from './LayoutLearn.server';
+
 export const a = Link;
 
 export function Hello() {
   return <h1>hi</h1>;
 }
 
-export const wrapper = function Wrapper({children}) {
+export const wrapper = function Wrapper({router, data, children}) {
+  if (!router) {
+    throw Error('noooo');
+  }
+
+  let Layout = LayoutLearn;
+  if (router.pathname.startsWith('/apis/')) {
+    Layout = LayoutAPI;
+  }
+
   return (
-    <div
-      style={{
-        border: '1px solid red',
-      }}>
+    <Layout>
+      {JSON.stringify(data)}
+      <hr />
       {children}
-    </div>
+    </Layout>
   );
 };

beta/src/components_new/LayoutAPI.server.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+// @ts-ignore
+export default function LayoutAPI({children}: {children: any}) {
+  return (
+    <>
+      <h1>your in api</h1>
+      <input placeholder="Search" />
+      <hr />
+      {children}
+    </>
+  );
+}

beta/src/components_new/LayoutLearn.server.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+
+if (typeof alert !== 'undefined') {
+  alert('lalala');
+}
+
+// @ts-ignore
+export default function LayoutLearn({children}: {children: any}) {
+  return (
+    <>
+      <h1>your in learn</h1>
+      <input placeholder="Search" />
+      <hr />
+      {children}
+    </>
+  );
+}

beta/src/pages/apis/usestate.server.md

@@ -1,3 +1,7 @@
+---
+title: useState
+---
+
 ## usestate page {/*usestate-page*/}
 
 lalalal  [go to props](/learn/props)

beta/src/pages/test.server.js

@@ -0,0 +1,3 @@
+export default function Hi() {
+  return <h1>hi</h1>;
+}