feat: move ad into menu & enable import

src/components/Code.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { th, styled, up, css } from '@smooth-ui/core-sc'
 import Highlight, { defaultProps } from 'prism-react-renderer'
-import { useMDXScope } from 'gatsby-plugin-mdx/context'
 import {
   LiveProvider,
   LiveEditor,
@@ -50,21 +49,62 @@ const LivePreview = styled(BaseLivePreview)`
   }
 `
 
-const globalScope = {}
+const globalModules = {
+  react: 'React',
+}
 
-export function LiveScope({ scope }) {
-  Object.assign(globalScope, scope)
+export function LiveConfig({ modules }) {
+  Object.assign(globalModules, modules)
   return null
 }
 
+function req(path) {
+  const dep = globalModules[path]
+
+  if (!dep) {
+    throw new Error(`Unable to resolve path to module '${path}'.`)
+  }
+  return dep
+}
+
+function importToRequire(code) {
+  return (
+    code
+      // { a as b } => { a: b }
+      .replace(/([0-9a-z_$]+) as ([0-9a-z_$]+)/gi, '$1: $2')
+      // import { a } from "a" => const { a } = require("b")
+      .replace(
+        /import {([^}]+)} from ([^\s;]+);?/g,
+        'const {$1} = require($2);',
+      )
+      // import a from "a" => const a = require("a").default || require("a")
+      .replace(
+        /import ([\S]+) from ([^\s;]+);?/g,
+        'const $1 = require($2).default || require($2);',
+      )
+      // import * as a from "a"
+      .replace(
+        /import \* as ([\S]+) from ([^\s;]+);?/g,
+        'const $1 = require($2);',
+      )
+      // import a from "a" => const a = require("a").default || require("a")
+      .replace(
+        /import (.+),\s?{([^}]+)} from ([^\s;]+);?/g,
+        [
+          'const $1 = require($3).default || require($3);',
+          'const {$2} = require($3);',
+        ].join('\n'),
+      )
+  )
+}
+
 export function Code({ children, lang = 'markup', live, noInline }) {
-  const scope = useMDXScope()
   if (live) {
     return (
       <LiveProvider
         code={children.trim()}
-        transformCode={code => `/* @jsx mdx */${code}`}
-        scope={{ mdx, ...scope, ...globalScope }}
+        transformCode={code => `/* @jsx mdx */ ${importToRequire(code)}`}
+        scope={{ mdx, require: req }}
         language={lang}
         theme={theme}
         noInline={noInline}

src/components/DocLayout.js

@@ -73,6 +73,7 @@ const SidebarWrapper = styled.div`
       padding-top: 0;
       position: fixed;
       height: calc(100vh - ${th('headerHeight')});
+      overflow-y: auto;
       z-index: 2;
       margin-right: -999px;
       padding-right: 999px;
@@ -132,32 +133,10 @@ const FloatingAd = styled.div`
   display: none;
 
   ${up(
-    'sm',
+    'md',
     css`
       display: block;
-      float: right;
-      margin-top: 72px;
-      background-color: white;
-      padding: 16px;
-    `,
-  )}
-
-${up(
-  'md',
-  css`
-    float: right;
-  `,
-)}
-
-  ${up(
-    'xl',
-    css`
-      z-index: 500;
-      position: fixed;
-      float: none;
-      bottom: 0;
-      left: 0;
-      margin: 0;
+      padding: 16px 0 10px 18px;
     `,
   )}
 `
@@ -169,16 +148,16 @@ export function DocLayout({ children, ...props }) {
         <Grid gutter={0}>
           <Wrapper>
             <ArticleContainer>
-              <FloatingAd>
-                <CodeFund />
-              </FloatingAd>
               <Article>{children}</Article>
             </ArticleContainer>
             <MenuConsumer>
               {({ opened, toggle }) => (
                 <>
                   <SidebarContainer opened={opened}>
                     <SidebarWrapper>
+                      <FloatingAd>
+                        <CodeFund />
+                      </FloatingAd>
                       <Sidebar />
                     </SidebarWrapper>
                   </SidebarContainer>

src/pages/docs/Button.js

@@ -1 +1,5 @@
-export default 'button'
+import React from 'react'
+
+export default function Button(props) {
+  return <button type="button" style={{ color: 'red' }} {...props} />
+}

src/pages/docs/getting-started.mdx

@@ -4,14 +4,34 @@ title: Getting Started
 order: 1
 ---
 
-import styled from 'styled-components'
+import { LiveConfig } from '../../components'
 import Button from './Button'
-import { LiveScope } from '../../components/Code'
 
-<LiveScope scope={{ styled }} />
+<LiveConfig
+  modules={{
+    'docs/Button': Button,
+  }}
+/>
 
 # Getting Started
 
+## Code example
+
+```jsx live noInline
+import React from 'react'
+import Button from 'docs/Button'
+
+function Example() {
+  return <Button>Hello</Button>
+}
+
+render(<Example />)
+```
+
+```jsx
+<Button>Good</Button>
+```
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus erat cursus rutrum cursus. Sed faucibus mi et tristique cursus. Donec vel sodales ex. Proin ac egestas nibh. Curabitur efficitur urna eu molestie porta. Maecenas pulvinar pulvinar placerat. In mollis ultricies augue a dignissim. Pellentesque gravida massa vitae odio scelerisque fringilla. Nam in erat vitae justo porttitor porttitor. Vivamus aliquet vestibulum eros, eget volutpat turpis interdum eu.
 
 Mauris quis tellus dictum, eleifend risus sit amet, accumsan nulla. Aenean a sem orci. Praesent non tellus lorem. Sed cursus congue nisi eget euismod. Nam ac mauris at diam consequat fringilla. Sed sit amet nulla id dolor semper pulvinar eu sed lorem. Sed in ante eget tortor maximus consequat elementum ultricies diam. Nunc pulvinar, nibh vel ultrices rhoncus, mauris tellus faucibus arcu, in sagittis diam est et nisi. Proin elementum mauris ex, nec dictum nunc sagittis et. Praesent sit amet facilisis est.
@@ -31,15 +51,3 @@ Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris iaculis aug
 Duis mattis felis vitae lectus fermentum, at faucibus augue blandit. Curabitur vitae neque et risus rutrum aliquam. Aliquam malesuada, massa in pellentesque accumsan, magna lacus finibus ex, vel efficitur ante neque ut velit. Nullam eget commodo mauris. Mauris pretium interdum sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut interdum posuere dolor nec dapibus. Maecenas non tempus velit. Morbi eget risus risus. Integer bibendum molestie lorem tincidunt porttitor.
 
 Etiam elementum, odio sed maximus fringilla, massa dui efficitur ante, sed dictum est tellus at augue. Integer eleifend eros quis nibh aliquet rhoncus. Proin nibh dui, iaculis et molestie quis, interdum in felis. Fusce condimentum iaculis eleifend. Nam porttitor velit eu accumsan vehicula. Donec dapibus commodo risus vel lacinia. Phasellus et aliquet nisl. Proin eu mi eget sapien tempus malesuada at vitae ante. Fusce rhoncus eros in ligula mattis, et elementum lacus pulvinar. Maecenas rhoncus et eros a molestie.
-
-## Code example
-
-```jsx live
-<Button>Hello</Button>
-```
-
-```jsx
-<Button>Good</Button>
-```
-
-This is good `Hello`