Fix site buttons and remove Links from code example (#521)

* Fix site buttons and remove Links from live code * This is probably a bad idea but it works * Remove unused thing * Remove another unused thing * More unused stuff
emotion-js · Jan 5, 2018 · b1db578 · b1db578
1 parent c5a0b60
commit b1db578
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 112 deletions.
diff --git a/docs/homepage-buttons.md b/docs/homepage-buttons.md
@@ -0,0 +1,50 @@
+```jsx live
+const Link = styled.a`
+  min-width: 12rem;
+  margin: 0 auto 20px;
+  padding: 16px;
+  border-radius: 5px;
+  text-decoration: none;
+  border: ${props =>
+    props.primary ? 'none' : '3px solid currentColor'};
+  background: ${props =>
+    props.primary &&
+    'linear-gradient(90deg, #D26AC2, #46C9E5)'};
+  color: ${props =>
+    props.primary ? '#1D2029' : '#D26AC2'};
+  &:hover {
+    opacity: 0.95;
+  }
+  @media (min-width: 768px) {
+    margin: 0 20px 0 0;
+    &:last-child {
+      margin: 0;
+    }
+  }
+`
+```
+```jsx live
+const Link = styled.a(props => ({
+  minWidth: '12rem',
+  margin: '0 auto 20px',
+  padding: 16,
+  borderRadius: 5,
+  textDecoration: 'none',
+  border: props.primary
+    ? 'none'
+    : '3px solid currentColor',
+  background:
+    props.primary &&
+    'linear-gradient(90deg, #D26AC2, #46C9E5)',
+  color: props.primary ? '#1D2029' : '#D26AC2',
+  '&:hover': {
+    opacity: '0.95'
+  },
+  '@media (min-width: 768px)': {
+    margin: '0 20px 0 0',
+    '&:last-child': {
+      margin: 0
+    }
+  }
+}))
+```
diff --git a/packages/site/src/components/live/index.js b/packages/site/src/components/live/index.js
@@ -10,7 +10,7 @@ type Props = {
   compile: Compiler,
   render: (...args: *) => React.Node,
   scope: Scope,
-  initial: string | React.Element<*>
+  initial: string
 }
 
 type State = {
@@ -22,17 +22,9 @@ type State = {
 export default class Live extends React.Component<Props, State> {
   constructor(...args: *) {
     super(...args)
-    if (typeof this.props.initial === 'string') {
-      this.state = {
-        code: this.props.code,
-        ...evaluate(this.props.initial, this.props.scope)
-      }
-    } else {
-      this.state = {
-        code: this.props.code,
-        error: null,
-        element: this.props.initial
-      }
+    this.state = {
+      code: this.props.code,
+      ...evaluate(this.props.initial, this.props.scope)
     }
   }
   static defaultProps = {

diff --git a/packages/site/src/pages/index.js b/packages/site/src/pages/index.js
@@ -4,14 +4,7 @@ import styled, { css } from 'react-emotion'
 import Box from '../components/Box'
 import { scope, Error } from '../components/Playground'
 import { openColors, colors, constants } from '../utils/style'
-import {
-  stringCode,
-  objectCode,
-  GatsbyLink,
-  PrecompiledLinks,
-  PrecompiledLink,
-  Preview
-} from '../utils/demo-buttons'
+import { GatsbyLink, Preview } from '../utils/demo-buttons'
 import Live, {
   compile as _compile,
   Editor,
@@ -40,7 +33,8 @@ const SelectButton = styled.button`
 
 type Props = {
   data: {
-    imageSharp: *
+    imageSharp: *,
+    allMarkdownRemark: *
   }
 }
 
@@ -52,12 +46,20 @@ type State = {
 }
 
 class IndexPage extends React.Component<Props, State> {
-  state = { mode: 'string', code: stringCode }
+  state = {
+    mode: 'string',
+    code: this.props.data.allMarkdownRemark.edges[0].node.hast.children[0]
+      .children[0].value
+  }
   render() {
+    const nodes = this.props.data.allMarkdownRemark.edges[0].node.hast.children
+    const precompiledCode = nodes[0].properties.compiled + '\nrender(Link);'
+    const stringCode = nodes[0].children[0].value
+    const objectCode = nodes[2].children[0].value
     return (
       <Live
         scope={scope}
-        initial={PrecompiledLink}
+        initial={precompiledCode}
         compile={compile}
         code={this.state.code}
         render={({ error, code, onChange, element, onError }) => {
@@ -111,13 +113,8 @@ class IndexPage extends React.Component<Props, State> {
                       {error ? null : (
                         <Preview
                           onError={onError}
-                          Links={PrecompiledLinks}
-                          Link={
-                            error
-                              ? PrecompiledLink
-                              : // $FlowFixMe
-                                element.withComponent(GatsbyLink)
-                          }
+                          Link={// $FlowFixMe
+                          element.withComponent(GatsbyLink)}
                         />
                       )}
                     </ErrorBoundary>
@@ -181,6 +178,15 @@ export const pageQuery = graphql`
         ...GatsbyImageSharpResolutions
       }
     }
+    allMarkdownRemark(
+      filter: { fileAbsolutePath: { glob: "**/homepage-buttons.md" } }
+    ) {
+      edges {
+        node {
+          hast
+        }
+      }
+    }
   }
 `
 

diff --git a/packages/site/src/utils/demo-buttons.js b/packages/site/src/utils/demo-buttons.js
@@ -5,110 +5,29 @@ import styled, { css } from 'react-emotion'
 import _GatsbyLink from 'gatsby-link'
 import { ErrorBoundary } from '../components/live'
 
-const stringLinks = `
+const Links = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-
   margin: 1rem 0;
-
   @media (min-width: 768px) {
     flex-direction: row;
     justify-content: flex-start;
   }
 `
 
-const stringLink = `
-  box-sizing: border-box;
-  overflow: hidden;
-
-  min-width: 12rem;
-  margin: 0 auto 20px;
-  padding: 16px;
-  border-radius: 5px;
-  text-decoration: none;
-  border: \${props => props.primary ? 'none' : '3px solid currentColor'};
-  background: \${props => props.primary && 'linear-gradient(90deg, #D26AC2, #46C9E5)'};
-  color: \${props => props.primary ? '#1D2029' : '#D26AC2'};
-
-  &:hover {
-    opacity: 0.95;
-  }
-
-  @media (min-width: 768px) {
-    margin: 0 20px 0 0;
-
-    &:last-child {
-      margin: 0;
-    }
-  }
-`
-
-export const stringCode = `
-const Links = styled.div\`${stringLinks}\`
-
-const Link = styled.a\`${stringLink}\`
-`
-
-export const objectCode = `
-const Links = styled.div(props => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-
-  margin: '1rem 0',
-
-  '@media (min-width: 768px)': {
-    flexDirection: row,
-    justifyContent: flex-start
-  }
-}))
-
-const Link = styled.a(props => ({
-  boxSizing: 'border-box',
-  overflow: 'hidden',
-  borderRadius: 5,
-  padding: 16,
-  margin: '1rem 0',
-  width: '12rem',
-  border: props.primary ? 'none' : '3px solid currentColor',
-  background: props.primary && 'linear-gradient(90deg, #D26AC2, #46C9E5)',
-  color: props.primary ? '#1D2029' : '#D26AC2',
-  textDecoration: 'none',
-  '&:hover': {
-    opacity: '0.95'
-  },
-  '@media (min-width: 768px)': {
-    margin: '0 20px 0 0',
-
-    '&:last-child': {
-      margin: 0
-    }
-  }
-}))`
-
 export const GatsbyLink = ({ primary, ...props }: *) => (
   <_GatsbyLink {...props} />
 )
 
-export const PrecompiledLinks = styled.div`
-  ${stringLinks};
-`
-
-export const PrecompiledLink = styled(GatsbyLink)`
-  ${stringLink};
-`
-
 const textCenter = css`
   text-align: center;
 `
 
 export const Preview = ({
-  Links,
   Link,
   onError
 }: {
-  Links: React.ComponentType<*>,
   Link: React.ComponentType<*>,
   onError: Function
 }) => (