Export builder page

components/builder-helper.js

@@ -26,7 +26,7 @@ export default ({ badgeURL, onSelect }) => {
       )}
       <style jsx>{`
         .helper {
-          height: calc(50vh - 60px);
+          height: 50vh;
           width: 100%;
           display: flex;
           justify-content: center;

components/builder-hints.js

@@ -9,17 +9,16 @@ export default ({ focus, badgeURL }) => {
     <div className='hints' style={style}>
       <Hint left={0} width={50} height={3}>
         <div style={{ textAlign: 'left', marginBottom: '2em' }}>
-          SERVICE_NAME (
-          <a href='/gallery/static'>static badge</a> / <a href='/gallery/live'>live badge</a>)
+          SERVICE_NAME (static badge / live badge)
         </div>
       </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 / <a href='/docs/help#colors'>COLOR_NAME</a> (optional)
+        &nbsp;RGB / <a href='/#colors'>COLOR_NAME</a> (optional)
       </Hint>
       <Hint left={290} width={110} height={1}>
-        <a href='/docs/help#options'>OPTIONS (icon, label, etc.)</a>
+        <a href='/#options'>OPTIONS (icon, label, etc.)</a>
       </Hint>
       <style jsx>{`
         .hints {
@@ -35,6 +34,7 @@ export default ({ focus, badgeURL }) => {
         }
         a:hover {
           border-bottom: 1px dashed #333;
+          text-decoration: none;
         }
       `}</style>
     </div>

components/builder-preview.js

@@ -11,7 +11,7 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
           Badgen
           <StyleSwitch host={host} />
         </h1>
-        <p>Fast badge generating service.</p>
+        <p>Fast badge generating service</p>
       </div>
       <div className={'preview ' + (showPreview ? 'show' : 'none')}>
         <PreviewBadge host={host} url={badgeURL} />
@@ -46,12 +46,12 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
           height: 42px;
           width: 42px;
           vertical-align: top;
-          margin-top: 2px;
+          margin-top: -1px;
           margin-right: 10px;
         }
         .title h1 {
           margin: 1.5rem 0 0 0;
-          font: 48px/48px Merriweather, serif;
+          font: 46px/48px Merriweather, serif;
           font-weight: 700;
           color: #333;
           height: 52px;
@@ -59,7 +59,7 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
           position: relative;
         }
         .title p {
-          font: 19px/32px Merriweather, serif;
+          font: 20px/32px Merriweather, serif;
           font-weight: 300;
           letter-spacing: 0.3px;
           color: #333;
@@ -130,12 +130,12 @@ const PreviewBadge = debounceRender(({ host, url }) => {
 
 const genBadgeSrc = (host, url) => {
   if (url === '') {
-    return host + 'badge///blue'
+    return host + 'badge/badgen/preview'
   }
   if (url.split('/').length > 2) {
     return host + url
   } else {
-    return host + 'badge///blue'
+    return host + 'badge/badgen/preview'
   }
 }
 

components/home-intro.js

@@ -5,13 +5,13 @@ export default ({ isFlat, children }) => (
     <h3>Usage</h3>
     <pre>{ explainCode(isFlat) }</pre>
 
-    <h3 id='color-examples'>Available color names</h3>
+    <h3 id='colors'>Available color names</h3>
     { colorExamples() }
 
-    <h3>Available icons</h3>
+    <h3 id='icons'>Available icons</h3>
     { iconExamples() }
 
-    <h3>Available query params</h3>
+    <h3 id='options'>Available query params</h3>
     <ul>
       <li>
         <code>color</code>

next.config.js

@@ -1,8 +1,3 @@
 module.exports = {
-  target: 'serverless',
-  exportPathMap: async function (defaultPathMap) {
-    return {
-      '/': { page: '/' }
-    }
-  }
+  target: 'serverless'
 }