web: debounce preview update

components/badge-preview.js

@@ -1,15 +1,25 @@
 export default ({ host = 'https://badgen.net/', badgeURL }) => {
-  const badgeSrc = host + (badgeURL || 'badge///blue')
-  console.log(badgeURL)
   return (
     <div>
-      <img src={badgeSrc} />
+      <img src={genBadgeSrc(host, badgeURL)} />
       <style jsx>{`
         div {
-          height: 60px;
+          height: 90px;
           text-align: center;
         }
+        img {
+          height: 30px;
+          padding: 10px 0;
+        }
       `}</style>
     </div>
   )
 }
+
+const genBadgeSrc = (host, path) => {
+  if (path.split('/').length > 2) {
+    return host + path
+  } else {
+    return host + 'badge///blue'
+  }
+}

components/the-bar.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import debounce from 'lodash.debounce'
 
 export default class extends React.Component {
-  onChange = (e) => {
-    this.props.onChange(e.target.value)
-  }
+  onChangeDebounced = debounce(this.props.onChange, 500)
+
+  onChange = ev => this.onChangeDebounced(ev.target.value)
 
   render () {
     const hostname = 'https://badgen.net/'
@@ -36,6 +37,7 @@ export default class extends React.Component {
             border: none;
             outline: none;
             background: transparent;
+            color: black;
           }
         `}</style>
       </label>

package-lock.json

@@ -5376,8 +5376,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "log-driver": {
       "version": "1.2.7",

package.json

@@ -28,6 +28,7 @@
     "chrome-webstore": "^1.0.0",
     "date-fns": "^1.29.0",
     "got": "^9.2.1",
+    "lodash.debounce": "^4.0.8",
     "micro": "^9.3.3",
     "micro-fork": "^0.1.0",
     "millify": "^2.0.1",