web: better gallery routes

components/gallery-header.js

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+
+export default ({ current }) => {
+  return (
+    <header>
+      <h1>Badgen Gallery</h1>
+      <div className={`tab ${current}`}>
+        <Link href='/gallery/live'>
+          <a className='live'>Live Badges</a>
+        </Link>
+        <Link href='/gallery/static'>
+          <a className='static'>Static Badges</a>
+        </Link>
+      </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;
+        }
+        .live a.live,
+        .static a.static {
+          color: #EEE;
+          background-color: #333;
+        }
+      `}</style>
+    </header>
+  )
+}

libs/public-handlers.js

@@ -5,9 +5,17 @@ const servePublicPages = (req, res) => {
   serveHandler(req, res, { public: 'public' })
 }
 
+const redirectTo = (target) => {
+  return (req, res) => {
+    res.writeHead(302, { 'Location': target })
+    res.end()
+  }
+}
+
 module.exports = [
   get('/_next/*', servePublicPages),
   get('/static/*', servePublicPages),
   get('/builder', servePublicPages),
-  get('/gallery', servePublicPages)
+  get('/gallery', redirectTo('/gallery/live')),
+  get('/gallery/*', servePublicPages)
 ]

pages/gallery.js

@@ -1,69 +0,0 @@
-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>
-    )
-  }
-}

pages/gallery/live.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import GalleryHeader from '../../components/gallery-header.js'
+import BadgeExamples from '../../components/badge-examples.js'
+import liveExamples from '../../libs/examples-live.js'
+
+export default class Gallery extends React.Component {
+  render () {
+    return (
+      <div className='wrapper'>
+        <GalleryHeader current='live' />
+        <div className='content'>
+          <BadgeExamples data={liveExamples} />
+        </div>
+        <style jsx>{`
+          .content {
+            padding: 3rem 0;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}

pages/gallery/static.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import GalleryHeader from '../../components/gallery-header.js'
+import BadgeExamples from '../../components/badge-examples.js'
+import staticExamples from '../../libs/examples-static.js'
+
+export default class Gallery extends React.Component {
+  render () {
+    return (
+      <div className='wrapper'>
+        <GalleryHeader current='static' />
+        <div className='content'>
+          <BadgeExamples data={staticExamples} />
+        </div>
+        <style jsx>{`
+          .content {
+            padding: 3rem 0;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}