From 4cd0188864bab293cde31b010f4c57c84955eba1 Mon Sep 17 00:00:00 2001
From: Amio <amio.cn@gmail.com>
Date: Sun, 2 Jun 2019 14:11:51 +0800
Subject: [PATCH] Consistent badgen-title

---
 components/badgen-title.jsx   | 111 ++++++++++++++++++++++++++++++++++
 components/builder-preview.js |  79 ++----------------------
 components/home-header.js     |  10 ---
 pages/index.js                |   6 +-
 4 files changed, 118 insertions(+), 88 deletions(-)
 create mode 100644 components/badgen-title.jsx
 delete mode 100644 components/home-header.js

diff --git a/components/badgen-title.jsx b/components/badgen-title.jsx
new file mode 100644
index 0000000..9f29516
--- /dev/null
+++ b/components/badgen-title.jsx
@@ -0,0 +1,111 @@
+import Link from 'next/link'
+
+const BadgenTitle = ({ host }) => {
+  return (
+    <div className='title-block'>
+      <div className='title'>
+        <h1>
+          <img src='/static/badgen-logo.svg' />
+          Badgen
+          <StyleSwitch host={host} />
+        </h1>
+        <p>Fast badge generating service</p>
+      </div>
+      <style jsx>{`
+        .title-block {
+          height: calc(50vh - 100px);
+          width: 100%;
+          min-height: 160px;
+          position: relative;
+        }
+        .title {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        .title {
+          transition: all 200ms ease-out;
+        }
+        .title.hidden {
+          opacity: 0;
+          transform: translateY(-20px);
+        }
+        .title.show {
+          transition-delay: 100ms;
+        }
+        .title img {
+          height: 42px;
+          width: 42px;
+          vertical-align: top;
+          margin-top: -1px;
+          margin-right: 10px;
+        }
+        .title h1 {
+          margin: 1.5rem 0 0 0;
+          font: 46px/48px Merriweather, serif;
+          font-weight: 700;
+          color: #333;
+          height: 52px;
+          width: 235px;
+          position: relative;
+        }
+        .title p {
+          font: 20px/32px Merriweather, serif;
+          font-weight: 300;
+          letter-spacing: 0.3px;
+          color: #333;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const StyleSwitch = ({ host }) => {
+  if (!host) return null
+
+  return (
+    <span className='style-switch'>
+      { host.includes('https://flat.') ? [
+        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>,
+        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>
+      ] : [
+        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>,
+        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>
+      ] }
+      <style jsx>{`
+        .style-switch {
+          position: absolute;
+          box-sizing: border-box;
+          top: -2px;
+          left: 235px;
+          height: 26px;
+          font: 16px/26px sans-serif;
+          overflow: hidden;
+        }
+        a {
+          color: #999;
+          display: block;
+          line-height: 26px;
+          padding: 1px 3px;
+        }
+        a:first-child {
+          margin-top: 0;
+          transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+        .style-switch:hover a:first-child {
+          margin-top: -26px;
+        }
+        a:focus {
+          outline: none;
+          color: #08C;
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default BadgenTitle
diff --git a/components/builder-preview.js b/components/builder-preview.js
index 5e58942..6240ab7 100644
--- a/components/builder-preview.js
+++ b/components/builder-preview.js
@@ -1,17 +1,12 @@
-import Link from 'next/link'
 import debounceRender from 'react-debounce-render'
+import BadgenTitle from './badgen-title.jsx'
 
 const BadgePreview = ({ host, badgeURL, focus }) => {
   const showPreview = focus || !!badgeURL
   return (
     <div className='header-preview'>
       <div className={'title ' + (showPreview ? 'hidden' : 'show')}>
-        <h1>
-          <img src='/static/badgen-logo.svg' />
-          Badgen
-          <StyleSwitch host={host} />
-        </h1>
-        <p>Fast badge generating service</p>
+        <BadgenTitle host={host} />
       </div>
       <div className={'preview ' + (showPreview ? 'show' : 'none')}>
         <PreviewBadge host={host} url={badgeURL} />
@@ -42,28 +37,6 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
         .title.show {
           transition-delay: 100ms;
         }
-        .title img {
-          height: 42px;
-          width: 42px;
-          vertical-align: top;
-          margin-top: -1px;
-          margin-right: 10px;
-        }
-        .title h1 {
-          margin: 1.5rem 0 0 0;
-          font: 46px/48px Merriweather, serif;
-          font-weight: 700;
-          color: #333;
-          height: 52px;
-          width: 235px;
-          position: relative;
-        }
-        .title p {
-          font: 20px/32px Merriweather, serif;
-          font-weight: 300;
-          letter-spacing: 0.3px;
-          color: #333;
-        }
         .preview {
           pointer-events: none;
           opacity: 0;
@@ -80,56 +53,12 @@ const BadgePreview = ({ host, badgeURL, focus }) => {
   )
 }
 
-const StyleSwitch = ({ host }) => {
-  if (!host) return null
-
-  return (
-    <span className='style-switch'>
-      { host.includes('https://flat.') ? [
-        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>,
-        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>
-      ] : [
-        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>,
-        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>
-      ] }
-      <style jsx>{`
-        .style-switch {
-          position: absolute;
-          box-sizing: border-box;
-          top: -2px;
-          left: 235px;
-          height: 26px;
-          font: 16px/26px sans-serif;
-          overflow: hidden;
-        }
-        a {
-          color: #999;
-          display: block;
-          line-height: 26px;
-          padding: 1px 3px;
-        }
-        a:first-child {
-          margin-top: 0;
-          transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
-        }
-        .style-switch:hover a:first-child {
-          margin-top: -26px;
-        }
-        a:focus {
-          outline: none;
-          color: #08C;
-        }
-      `}</style>
-    </span>
-  )
-}
-
 const PreviewBadge = debounceRender(({ host, url }) => {
   return <img style={{ height: '30px' }} src={genBadgeSrc(host, url)} />
-}, 400)
+}, 300)
 
 const genBadgeSrc = (host, url) => {
-  if (url === '') {
+  if (!url) {
     return host + 'badge/badgen/preview'
   }
   if (url.split('/').length > 2) {
diff --git a/components/home-header.js b/components/home-header.js
deleted file mode 100644
index 1108d6f..0000000
--- a/components/home-header.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default () => <>
-  <h1>
-    <img src='https://badgen.net/static/badgen-logo.svg' /> Badgen
-  </h1>
-  <p>Fast badge generating service.</p>
-  <p>
-    <a href='https://badgen.net'>classic</a>
-    <a href='https://flat.badgen.net'>flat</a>
-  </p>
-</>
diff --git a/pages/index.js b/pages/index.js
index 60ddac8..df0b376 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,16 +1,16 @@
 import { useState } from 'react'
 import BadgeExamples from '../components/badge-examples.js'
-import Header from '../components/home-header.js'
+import BadgenTitle from '../components/badgen-title.jsx'
 import Intro from '../components/home-intro.js'
 import Footer from '../components/footer.js'
 import examples from '../static/.gen/badges.json'
 
-const Index = ({ badgeExamples }) => {
+const Index = () => {
   const [ tab, setTab ] = useState('live')
   const badges = examples[tab]
 
   return <>
-    <Header />
+    <BadgenTitle host='https://badgen.net' />
     <div className='docs'>
       <Intro />
       <h2 style={{ textAlign: 'center' }}>Badge Gallery</h2>