Merge pull request #159 from FormidableLabs/fix/template-strings-docs

Fix issue with template strings, update docs and site

Author: kitten

.gitignore

@@ -1,9 +1,10 @@
 node_modules
+demo/out
 lib
 npm-debug.log.*
 dist
 .DS_Store
 bundle-stats.html
 .next
 .out
-.history/
+.history/

README.md

@@ -1,7 +1,7 @@
-<p align="center"><img src="https://raw.githubusercontent.com/philpl/react-live/master/docs/logo.gif" width=250></p>
+<p align="center"><img src="https://user-images.githubusercontent.com/17658189/63178611-4e90d580-c042-11e9-875f-f2455148b9ae.png" width=250></p>
 <h2 align="center">React Live</h2>
 <p align="center">
-<strong>A production-focused playground for live editing React code</strong>
+<strong>A flexible playground for live editing React code</strong>
 <br><br>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/dm/react-live.svg"></a>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
@@ -18,6 +18,9 @@ It supports server-side rendering and comes in a tiny bundle.
 
 The library is structured modularly and lets you style and compose its components freely.
 
+
+<p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
+
 ## Usage
 
 Install it with `npm install react-live` or `yarn add react-live` and try out this piece of JSX:
@@ -151,7 +154,7 @@ It supports these props, while passing any others through to the `children`:
 |---|---|---|
 |code|PropTypes.string|The code that should be rendered, apart from the user’s edits
 |scope|PropTypes.object|Accepts custom globals that the `code` can use
-|noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`)
+|noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`
 |transformCode|PropTypes.func|Accepts and returns the code to be transpiled, affording an opportunity to first transform it
 |language|PropTypes.string|What language you're writing for correct syntax highlighting. (Default: `jsx`)
 |disabled|PropTypes.bool|Disable editing on the `<LiveEditor />` (Default: `false`)

demo/components/Header.js

@@ -1,25 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import * as polished from 'polished';
-
-import { foreground, blue } from '../utils/colors';
-
-const Image = styled.div`
-  background-image: url(https://raw.githubusercontent.com/philpl/react-live/master/docs/logo.gif);
-  background-size: cover;
-  background-position: center;
-
-  width: ${polished.rem(160)};
-  height: ${polished.rem(160)};
-  border-radius: ${polished.rem(3)};
-`;
+import { ProjectBadge } from 'formidable-oss-badges';
+import { background, blue } from '../utils/colors';
 
 const SubTitle = styled.h2`
   font-size: ${polished.modularScale(1)};
-  font-weight: bold;
+  font-weight: normal;
   color: ${blue};
   margin: 0;
-  margin-left: ${polished.rem(30)};
+  margin-left: ${polished.rem(20)};
   letter-spacing: ${polished.rem(0.3)};
   line-height: 1.5;
 
@@ -29,12 +19,16 @@ const SubTitle = styled.h2`
   }
 `;
 
+const StyledProjectBadge = styled(ProjectBadge)`
+  height: 230px;
+`;
+
 const Title = styled.h1`
   font-weight: normal;
   font-size: ${polished.modularScale(4)};
   line-height: 1.1;
   margin: 0;
-  margin-left: ${polished.rem(25)};
+  margin-left: ${polished.rem(20)};
 
   @media (max-width: 600px) {
     margin-left: 0;
@@ -58,14 +52,14 @@ const TitleRow = styled.div`
 `;
 
 const Description = styled.div`
-  margin: ${polished.rem(80)};
+  margin: ${polished.rem(50)};
   text-align: center;
   font-size: ${polished.modularScale(1)};
   color: ${blue};
   line-height: 1.5;
 
   @media (max-width: 600px) {
-    margin: ${polished.rem(80)} 0;
+    margin: ${polished.rem(50)} 0;
   }
 `;
 
@@ -76,7 +70,7 @@ const Button = styled.a`
   text-decoration: none;
   border-radius: ${polished.rem(3)};
   background: ${blue};
-  color: ${foreground};
+  color: ${background};
   margin: ${polished.rem(30)} 0;
 `;
 
@@ -88,13 +82,15 @@ const Container = styled.div`
 const Header = () => (
   <Container>
     <TitleRow>
-      <Image />
+      <StyledProjectBadge
+        color="#f677e1"
+        abbreviation="Rl"
+        description="React Live"
+      />
 
       <div>
         <Title>React Live</Title>
-        <SubTitle>
-          A production-focused playground for live editing React code 📡
-        </SubTitle>
+        <SubTitle>A flexible playground for live editing React code</SubTitle>
       </div>
     </TitleRow>
 

demo/components/LiveEdit.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import * as polished from 'polished';
 import { foreground, red, lightGrey } from '../utils/colors';
+import { reactLiveHome } from '../utils/theme';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 
 const StyledProvider = styled(LiveProvider)`
@@ -73,7 +74,7 @@ const StyledError = styled(LiveError)`
 `;
 
 const LiveEdit = ({ noInline, code }) => (
-  <StyledProvider code={code} noInline={noInline}>
+  <StyledProvider code={code} noInline={noInline} theme={reactLiveHome}>
     <LiveWrapper>
       <StyledEditor>
         <LiveEditor />

demo/next.config.js

@@ -9,5 +9,8 @@ module.exports = {
     };
 
     return config;
-  }
+  },
+  exportPathMap: () => ({
+    '/': { page: '/' }
+  })
 };

demo/package.json

@@ -5,13 +5,14 @@
   "license": "MIT",
   "scripts": {
     "dev": "node server.js",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
     "babel-plugin-polished": "^1.0.3",
     "babel-plugin-styled-components": "^1.5.0",
     "express": "^4.15.2",
+    "formidable-oss-badges": "^0.2.1",
     "lru-cache": "^4.0.2",
     "module-alias": "^2.0.0",
     "next": "^5.0.0",

demo/pages/_document.js

@@ -1,5 +1,6 @@
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
+import { background } from '../utils/colors';
 
 const resetStyles = `
 *,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
@@ -38,7 +39,7 @@ const mainStyles = `
     font-style: normal;
     padding: 0;
     margin: 0;
-    background: #282a36;
+    background: ${background};
     color: #f8f8f2;
   }
 

demo/pages/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import * as polished from 'polished';
+import { foreground } from '../utils/colors';
 
 import Header from '../components/Header';
 import LiveEdit from '../components/LiveEdit';
@@ -15,8 +16,9 @@ const Container = styled.div`
 `;
 
 const Description = styled.p`
-  color: white;
-  margin-bottom: ${polished.rem(10)};
+  color: ${foreground};
+  font-size: ${polished.modularScale(1)};
+  margin-bottom: ${polished.rem(20)};
   margin-top: ${polished.rem(50)};
 `;
 

demo/server.js

@@ -1,8 +1,8 @@
 import * as polished from 'polished';
 
-export const background = '#282a36';
+export const background = '#42374a';
 export const foreground = '#f8f8f2';
 export const red = '#ff5555';
 
-export const blue = polished.lighten(0.1, '#6272a4');
-export const lightGrey = polished.darken(0.05, '#282a36');
+export const blue = polished.lighten(0.1, '#d1b0dd');
+export const lightGrey = polished.darken(0.06, '#42374a');