web: move examples to gallery page

.eslintrc.yml

@@ -1,5 +1,7 @@
 ---
-extends: standard
+extends:
+  - standard
+  - standard-react
 parser: babel-eslint
 rules:
   max-len:

components/badge-examples.js

@@ -1,40 +1,5 @@
-import React from 'react'
-import liveExamples from '../libs/examples-live.js'
 
-export default class extends React.Component {
-  state = { expanded: false }
-
-  expand = () => this.setState({ expanded: !this.state.expanded })
-
-  render () {
-    return (
-      <div className='wrapper'>
-        <div className='ex-header'>
-          <a id='examples' href='#examples' onClick={this.expand}>
-            Badge Examples
-          </a>
-        </div>
-        { this.state.expanded && <Examples data={liveExamples} /> }
-        <style jsx>{`
-          .wrapper {
-            border-top: 1px solid #EEE;
-            width: 100%;
-          }
-          .ex-header {
-            height: 59px;
-            line-height: 59px;
-            padding: 0 1rem;
-          }
-          #examples {
-            display: inline-block;
-          }
-        `}</style>
-      </div>
-    )
-  }
-}
-
-const Examples = ({ data }) => {
+export default ({ data }) => {
   return Object.entries(data).map(([category, egs]) => (
     <dl key={category}>
       <dt>{category}</dt>
@@ -49,7 +14,7 @@ const Examples = ({ data }) => {
         dl {
           padding: 0 1em;
           margin: 0 auto;
-          width: 920px;
+          max-width: 920px;
         }
         dt {
           margin-bottom: 1em;
@@ -66,7 +31,7 @@ const Examples = ({ data }) => {
         }
         b {
           display: inline-block;
-          min-width: 15em;
+          min-width: 14em;
           font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
           text-align: right;
           font-weight: 300;
@@ -84,6 +49,11 @@ const Examples = ({ data }) => {
         span {
           font-family: monospace;
         }
+        @media (max-width: 600px) {
+          span {
+            display: none;
+          }
+        }
       `}</style>
     </dl>
   ))

components/builder-helper.js

@@ -1,9 +1,10 @@
 import examplesLive from '../libs/examples-live.js'
 import examplesStatic from '../libs/examples-static.js'
 
-const egs = Object.entries(examplesLive).reduce((accu, curr) => {
-  return accu.concat(curr[1].map(eg => eg.concat(curr[0])))
-}, examplesStatic.map(eg => ['', eg, 'static']))
+const egs = Object.entries({ ...examplesLive, ...examplesStatic })
+  .reduce((accu, curr) => {
+    return accu.concat(curr[1].map(eg => eg.concat(curr[0])))
+  }, [])
 
 export default ({ badgeURL, onSelect }) => {
   const matched = badgeURL.length > 1 && egs.filter(eg => {

libs/examples-static.js

@@ -1,9 +1,11 @@
-module.exports = [
-  'badge/Swift/4.2/orange',
-  'badge/license/MIT/blue',
-  'badge/chat/on%20gitter/cyan',
-  'badge/stars/★★★★☆',
-  'badge/become/a%20patron/F96854',
-  'badge/code%20style/standard/f2a',
-  'badge/platform/ios,macos,tvos?list=1'
-]
+module.exports = {
+  'static': [
+    ['swift version', 'badge/Swift/4.2/orange'],
+    ['license mit', 'badge/license/MIT/blue'],
+    ['gitter', 'badge/chat/on%20gitter/cyan'],
+    ['star rating', 'badge/stars/★★★★☆'],
+    ['patreon', 'badge/become/a%20patron/F96854'],
+    ['code style: standard', 'badge/code%20style/standard/f2a'],
+    ['platform', 'badge/platform/ios,macos,tvos?list=1']
+  ]
+}

pages/builder.js

@@ -2,7 +2,6 @@ import React from 'react'
 import Preview from '../components/builder-preview.js'
 import Bar from '../components/builder-bar.js'
 import Helper from '../components/builder-helper.js'
-import ExFooter from '../components/ex-footer.js'
 
 export default class BuilderPage extends React.Component {
   state = {
@@ -40,7 +39,6 @@ export default class BuilderPage extends React.Component {
           onChange={this.setBadgeURL}
           onFocus={this.setFocus} />
         <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
-        <ExFooter />
         <style jsx>{`
           div {
             height: 100%;

pages/gallery.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import BadgeExamples from '../components/badge-examples.js'
+import liveExamples from '../libs/examples-live.js'
+import staticExamples from '../libs/examples-static.js'
+
+export default class Gallery extends React.Component {
+  state = {
+    tab: 'live'
+  }
+
+  switch = () => this.setState({
+    tab: this.state.tab === 'live' ? 'static' : 'live'
+  })
+
+  render () {
+    const { tab } = this.state
+    const egData = tab === 'live' ? liveExamples : staticExamples
+    return (
+      <div className='wrapper'>
+        <div className='header'>
+          <h1>Badgen Gallery</h1>
+          <div className='tab' onClick={this.switch}>
+            <a className={tab === 'live' ? 'current' : ''}>Live Badges</a>
+            <a className={tab === 'static' ? 'current' : ''}>Static Badges</a>
+          </div>
+        </div>
+        <div className='content'>
+          <BadgeExamples data={egData} />
+        </div>
+        <style jsx>{`
+          .header {
+            background-color: #F7F7F7;
+            text-align: center;
+            padding: 5rem 0;
+          }
+          h1 {
+            font: 3rem/5rem Merriweather, serif;
+            letter-spacing: 1px;
+            font-weight: 700;
+            color: #333;
+            margin: 0;
+          }
+          .tab {
+            display: inline-block;
+            border: 1px solid #333;
+            margin-top: 1rem;
+          }
+          .tab a {
+            display: inline-block;
+            padding: 0 8px;
+            color: #333;
+            font: 14px/26px sans-serif;
+            text-transform: uppercase;
+          }
+          .tab a:hover {
+            cursor: pointer;
+          }
+          .tab a.current {
+            color: #EEE;
+            background-color: #333;
+          }
+          .content {
+            padding: 3rem 0;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}