web: add builder hints

components/builder-bar.js

@@ -1,9 +1,10 @@
 import React from 'react'
 
+const DEFAULT_SIZE = 42
+
 export default class extends React.Component {
   calcInputSize = url => {
-    const defaultSize = this.props.placeholder.length
-    return url.length < defaultSize ? defaultSize : url.length
+    return url.length < DEFAULT_SIZE ? DEFAULT_SIZE : url.length
   }
 
   onChange = ev => this.props.onChange(ev.target.value)
@@ -21,6 +22,7 @@ export default class extends React.Component {
           placeholder={placeholder}
           onChange={this.onChange}
           onFocus={this.props.onFocus}
+          onBlur={this.props.onBlur}
           value={badgeURL}
         />
         <style jsx>{`
@@ -32,6 +34,7 @@ export default class extends React.Component {
             justify-content: center;
             background-color: #F3F3F3;
             overflow-x: auto;
+            cursor: text;
           }
           span, input {
             font: 16px/24px monospace;
@@ -39,6 +42,7 @@ export default class extends React.Component {
           span {
             display: inline-block;
             text-align: right;
+            width: 234px;
           }
           input {
             height: 24px;
@@ -47,6 +51,7 @@ export default class extends React.Component {
             outline: none;
             background: transparent;
             color: black;
+            width: 526px;
           }
         `}</style>
       </label>

components/builder-helper.js

@@ -14,7 +14,7 @@ export default ({ badgeURL, onSelect }) => {
   const hints = matched.length === 1 && matched[0][1] === '/' + badgeURL ? [] : matched
 
   return (
-    <div className='wrapper'>
+    <div className='helper'>
       { hints.length ? (
         <table><tbody>
           { hints.map(eg => (
@@ -25,7 +25,7 @@ export default ({ badgeURL, onSelect }) => {
         ''
       )}
       <style jsx>{`
-        .wrapper {
+        .helper {
           height: calc(50vh - 60px);
           width: 100%;
           display: flex;

components/builder-hints.js

@@ -0,0 +1,65 @@
+
+export default ({ focus, badgeURL }) => {
+  const visible = !focus && !badgeURL
+  const style = {
+    opacity: visible ? 1 : 0,
+    pointerEvents: visible ? 'auto' : 'none'
+  }
+  return (
+    <div className='hints' style={style}>
+      <Hint left={0} width={50} height={3}>
+        "badge": default (static) badge generator
+      </Hint>
+      <Hint left={66} width={70} height={2}>TEXT</Hint>
+      <Hint left={153} width={60} height={2}>TEXT</Hint>
+      <Hint left={230} width={50} height={2}>&nbsp;RGB / COLOR_NAME (optional)</Hint>
+      <Hint left={290} width={110} height={1}>More Options (icon, label, etc.)</Hint>
+      <style jsx>{`
+        .hints {
+          height: 0;
+          position: relative;
+          overflow: visible;
+          width: 100%;
+          left: -147px;
+          transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const Hint = ({ left, width, height, children }) => {
+  const wrapperPos = {
+    left: `calc(50% + ${left}px)`,
+    height: `${height * 54}px`,
+    width: `${width}px`
+  }
+  return (
+    <div className='hint' style={wrapperPos}>
+      <div className='line' />
+      <div className='content'>{children}</div>
+      <style jsx>{`
+        .hint {
+          border-top: 2px solid #666;
+          position: absolute;
+        }
+        .line {
+          border-left: 2px solid #666;
+          height: calc(100% - 26px);
+          left: calc(50% - 1px);
+          position: relative;
+        }
+        .content {
+          min-width: 100%;
+          text-align: center;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          white-space: nowrap;
+          font: 16px/24px monospace;
+          color: #333;
+        }
+      `}</style>
+    </div>
+  )
+}

components/builder-preview.js

@@ -3,11 +3,11 @@ import debounceRender from 'react-debounce-render'
 const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
   return (
     <div className='wrapper'>
-      <div className={'title' + (focus ? ' focus' : '')}>
+      <div className={'title ' + (focus ? 'focus' : ' show')}>
         <h1><img src='/static/badgen-logo.svg' /> Badgen</h1>
         <p>Fast badge generating service.</p>
       </div>
-      <div className={'preview' + (focus ? ' focus' : '')}>
+      <div className={'preview ' + (focus ? 'focus' : 'none')}>
         <PreviewBadge host={host} url={badgeURL} />
       </div>
       <style jsx>{`
@@ -26,10 +26,15 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
           justify-content: center;
           align-items: center;
         }
+        .title {
+          transition: all 200ms ease-out;
+        }
         .title.focus {
           opacity: 0;
           transform: translateY(-20px);
-          transition: all 200ms ease-out;
+        }
+        .title.show {
+          transition-delay: 100ms;
         }
         .title img {
           height: 42px;
@@ -55,11 +60,11 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
           opacity: 0;
           transform: translateY(30px);
           transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
-          transition-delay: 160ms;
         }
         .preview.focus {
           opacity: 1;
           transform: translateY(0);
+          transition-delay: 180ms;
         }
       `}</style>
     </div>

pages/builder.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Preview from '../components/builder-preview.js'
 import Bar from '../components/builder-bar.js'
+import Hints from '../components/builder-hints.js'
 import Helper from '../components/builder-helper.js'
 
 export default class BuilderPage extends React.Component {
@@ -11,7 +12,8 @@ export default class BuilderPage extends React.Component {
     focus: false
   }
 
-  setFocus = () => this.state.focus || this.setState({ focus: true })
+  setBlur = () => this.setState({ focus: false })
+  setFocus = () => this.setState({ focus: true })
   setBadgeURL = badgeURL => this.setState({ badgeURL })
   selectExample = exampleURL => this.setState({ badgeURL: exampleURL })
 
@@ -22,7 +24,7 @@ export default class BuilderPage extends React.Component {
       : 'https://badgen.net'
     this.setState({
       host: (forceHost || autoHost) + '/',
-      placeholder: 'badge/:subject/:status/:color'
+      placeholder: 'badge/:subject/:status/:color?icon=github'
     })
   }
 
@@ -37,8 +39,11 @@ export default class BuilderPage extends React.Component {
           badgeURL={badgeURL}
           placeholder={placeholder}
           onChange={this.setBadgeURL}
+          onBlur={this.setBlur}
           onFocus={this.setFocus} />
-        <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
+        <Hints focus={focus} badgeURL={badgeURL} />
+        { badgeURL &&
+          <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} /> }
         <style jsx>{`
           div {
             height: 100%;