add algolia instantsearch searchbox, better responsive classes

client/package-lock.json

@@ -4,6 +4,121 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@algolia/cache-browser-local-storage": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.3.1.tgz",
+      "integrity": "sha512-pNelJomUeeQS5ZagEeUti8HltrfJbqXHnZXB1fez4Ycdm7GsEQm0r6fRCfx+1/6hqQJNo5zQUSA4ZgWi8VMs4Q==",
+      "requires": {
+        "@algolia/cache-common": "4.3.1"
+      }
+    },
+    "@algolia/cache-common": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.3.1.tgz",
+      "integrity": "sha512-BgZVQKfQ3rYSKHDbEuYeIHgQ7cIqbDVUe8gPib/YI6hB2FWdt3hQyDqKslulBt65MxZ5CLSrWg8mq/qL077Bog=="
+    },
+    "@algolia/cache-in-memory": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.3.1.tgz",
+      "integrity": "sha512-bd2Aqn8efGJpR8snjUvBJIONyQ2uqYQSbFH9rTrLPmJPMYdoTKTcVLrtpOhOlmvTTfguhqlv+zIjYdJcraeBvg==",
+      "requires": {
+        "@algolia/cache-common": "4.3.1"
+      }
+    },
+    "@algolia/client-account": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.3.1.tgz",
+      "integrity": "sha512-062Cxw61llvkeHS2bWghufNI0munw5fKGZBhUfDdnC7lsJpzYJwQdkdchzLqqIOXZa8k9vdLlnlKHk8f53E5fQ==",
+      "requires": {
+        "@algolia/client-common": "4.3.1",
+        "@algolia/client-search": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "@algolia/client-analytics": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.3.1.tgz",
+      "integrity": "sha512-+/gn1z3oAh2CE0xox7/Df9SseHcOuqgm4ngSXGh1cWpldsF+gioA9HWSh/4RSydViASKu3YIk5O61zFzVTKbOA==",
+      "requires": {
+        "@algolia/client-common": "4.3.1",
+        "@algolia/client-search": "4.3.1",
+        "@algolia/requester-common": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "@algolia/client-common": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.3.1.tgz",
+      "integrity": "sha512-1dcADKy3F/gMN+s+p5yvYdF6A4L5YEY0ll4JjSHGKXvZyWLDxKjyu/ToeUuHlrutWQu9w8UT2X7urES8BZU5WQ==",
+      "requires": {
+        "@algolia/requester-common": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "@algolia/client-recommendation": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-recommendation/-/client-recommendation-4.3.1.tgz",
+      "integrity": "sha512-4WZ9Pa2waOkpqv5acom4f8XBBlrnafeEwcSK4R0msubHJpUdkvD/+rxT5Ya1/0FAGvBPhOvtOJqsauaJYKM2Dw==",
+      "requires": {
+        "@algolia/client-common": "4.3.1",
+        "@algolia/requester-common": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "@algolia/client-search": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.3.1.tgz",
+      "integrity": "sha512-BGI8+8Gi3OELHtyXHflGz0Ms0DQLUQFu2Hs4us3L9gidyYhuvjl76x8EOOQRkXhQcWzEeqx+L2c2InTKtNfQfg==",
+      "requires": {
+        "@algolia/client-common": "4.3.1",
+        "@algolia/requester-common": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "@algolia/logger-common": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.3.1.tgz",
+      "integrity": "sha512-HOY89EkxFFR0LjeqE+fqaF3EeQUAYFdVdrAXsnrWhm/OsAlXiy+vsoHL4EaJLXvTQlJRBbgNyyQv8ZPAN9JLCw=="
+    },
+    "@algolia/logger-console": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.3.1.tgz",
+      "integrity": "sha512-aIJ2N++eTVLkwGFxb1AY60hxYIrNf3FgaEMkokPOAV7sPoWThITSQPj/2vruRLJsYZS2EnD8jxiETrCwSet7mw==",
+      "requires": {
+        "@algolia/logger-common": "4.3.1"
+      }
+    },
+    "@algolia/requester-browser-xhr": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.3.1.tgz",
+      "integrity": "sha512-aSkBWqt9IjZYzmJpP14ISO9tizjyumwAmGxnx2t/QuE3LUh/sJG2FL3Vvq44wjNk9yTPC/c1yiQA85IqeqGZ7g==",
+      "requires": {
+        "@algolia/requester-common": "4.3.1"
+      }
+    },
+    "@algolia/requester-common": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.3.1.tgz",
+      "integrity": "sha512-2lu0gOB2Rt4mn9gKDxjB8rY2IvU4usDA8bZVGl5tf/E81kRovtDZcgZjuKQ5zMyJ/xuIYXjx+ECXAxjUnNhieA=="
+    },
+    "@algolia/requester-node-http": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.3.1.tgz",
+      "integrity": "sha512-CnVQ5fHJVsvOZjOIagAIWW315NwGF/spBT5o8/+9ZFTuKQTeLk8/jdj7OXKZ2+vbWkqDM1sKMFXH2jyHOlZjtQ==",
+      "requires": {
+        "@algolia/requester-common": "4.3.1"
+      }
+    },
+    "@algolia/transporter": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.3.1.tgz",
+      "integrity": "sha512-fbA/XHjdVoO+sp+rPVe/+oK/mCac0S6VugMycg7Etujb4+6nv3STIZxtPiC+Xppbouh5tEEOE81F1aALHXBkBQ==",
+      "requires": {
+        "@algolia/cache-common": "4.3.1",
+        "@algolia/logger-common": "4.3.1",
+        "@algolia/requester-common": "4.3.1"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.10.4.tgz?cache=0&sync_timestamp=1593522948158&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.10.4.tgz",
@@ -1240,6 +1355,11 @@
         "@types/node": "*"
       }
     },
+    "@types/googlemaps": {
+      "version": "3.39.11",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.11.tgz",
+      "integrity": "sha512-GRgIICsibETwIC3IiK1U7dluJ/+vpdhIrySiyhTgZhe6Jqwz24GZePWqSvWepZer0NafmILEGe2U4CNAuwCpbw=="
+    },
     "@types/json-schema": {
       "version": "7.0.5",
       "resolved": "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.5.tgz?cache=0&sync_timestamp=1591720741205&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.5.tgz",
@@ -1916,6 +2036,11 @@
       "integrity": "sha1-0pHGpOl5ibXGHZrPOWrk/hM6cY0=",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
@@ -1984,6 +2109,42 @@
       "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
       "dev": true
     },
+    "algoliasearch": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.3.1.tgz",
+      "integrity": "sha512-q8aIYgdZZWOMzmvlIwxcbktVa8+M5cyI8hIrgd/NcSz/XKHfVTKdNYbnsmPqmYrssAmepx8C8vHnJrPuumUnYA==",
+      "requires": {
+        "@algolia/cache-browser-local-storage": "4.3.1",
+        "@algolia/cache-common": "4.3.1",
+        "@algolia/cache-in-memory": "4.3.1",
+        "@algolia/client-account": "4.3.1",
+        "@algolia/client-analytics": "4.3.1",
+        "@algolia/client-common": "4.3.1",
+        "@algolia/client-recommendation": "4.3.1",
+        "@algolia/client-search": "4.3.1",
+        "@algolia/logger-common": "4.3.1",
+        "@algolia/logger-console": "4.3.1",
+        "@algolia/requester-browser-xhr": "4.3.1",
+        "@algolia/requester-common": "4.3.1",
+        "@algolia/requester-node-http": "4.3.1",
+        "@algolia/transporter": "4.3.1"
+      }
+    },
+    "algoliasearch-helper": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.2.2.tgz",
+      "integrity": "sha512-/3XvE33R+gQKaiPdy3nmHYqhF8hqIu8xnlOicVxb1fD6uMFmxW8rGLzzrRfsPfxgAfm+c1NslLb3TzQVIB8aVA==",
+      "requires": {
+        "events": "^1.1.1"
+      },
+      "dependencies": {
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        }
+      }
+    },
     "alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/alphanum-sort/download/alphanum-sort-1.0.2.tgz",
@@ -3094,6 +3255,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz",
@@ -5798,7 +5964,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz?cache=0&sync_timestamp=1573220226399&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-ansi%2Fdownload%2Fhas-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       },
@@ -5806,8 +5971,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         }
       }
     },
@@ -5903,8 +6067,7 @@
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/he/download/he-1.2.0.tgz",
-      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8=",
-      "dev": true
+      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8="
     },
     "hex-color-regex": {
       "version": "1.1.0",
@@ -5929,6 +6092,22 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hogan.js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+      "integrity": "sha1-TNnhq9QpQUbnZ55B14mHMrAse/0=",
+      "requires": {
+        "mkdirp": "0.3.0",
+        "nopt": "1.0.10"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+          "integrity": "sha1-G79asbqCevI1dRQ0kEJkVfSB/h4="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npm.taobao.org/hoopy/download/hoopy-0.1.4.tgz",
@@ -6390,6 +6569,33 @@
         }
       }
     },
+    "instantsearch.css": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/instantsearch.css/-/instantsearch.css-7.1.0.tgz",
+      "integrity": "sha512-QL3iJTYG5NAP4LiZCojPg/m3dOELTNipq2FZ1IHFNZBTOsZCYQpFdI1UFB70oLijsHoq5WMBIG3ETbIzhcoDPQ=="
+    },
+    "instantsearch.js": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.7.0.tgz",
+      "integrity": "sha512-OkTcyHLcSu6eymWmVXsu2Tt0GRtkoRQXM+SCxj+nyvBY3y3hmGDjcb8bzkrACrhfR8SDbpEUiBGI1IUHjtvOGA==",
+      "requires": {
+        "@types/googlemaps": "^3.39.6",
+        "algoliasearch-helper": "^3.1.1",
+        "classnames": "^2.2.5",
+        "events": "^1.1.0",
+        "hogan.js": "^3.0.2",
+        "preact": "^10.0.0",
+        "prop-types": "^15.5.10",
+        "qs": "^6.5.1"
+      },
+      "dependencies": {
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        }
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npm.taobao.org/internal-ip/download/internal-ip-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finternal-ip%2Fdownload%2Finternal-ip-4.3.0.tgz",
@@ -6814,8 +7020,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
-      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk=",
-      "dev": true
+      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk="
     },
     "js-yaml": {
       "version": "3.14.0",
@@ -7091,6 +7296,11 @@
       "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks=",
       "dev": true
     },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz?cache=0&sync_timestamp=1562718717933&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.defaultsdeep%2Fdownload%2Flodash.defaultsdeep-4.6.1.tgz",
@@ -7115,6 +7325,23 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz",
@@ -7124,8 +7351,7 @@
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
     "log-symbols": {
       "version": "2.2.0",
@@ -7146,7 +7372,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz",
       "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -7666,6 +7891,14 @@
       "integrity": "sha1-aUi9/OgobwtdDlqI6DhOlU3+cIQ=",
       "dev": true
     },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz",
@@ -7729,8 +7962,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8160,8 +8392,7 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/path-parse/download/path-parse-1.0.6.tgz",
-      "integrity": "sha1-1i27VnlAXXLEc37FhgDp3c8G0kw=",
-      "dev": true
+      "integrity": "sha1-1i27VnlAXXLEc37FhgDp3c8G0kw="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -8872,6 +9103,11 @@
       "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
       "dev": true
     },
+    "preact": {
+      "version": "10.4.6",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.6.tgz",
+      "integrity": "sha512-80WJfXH53yyINig5Wza/8MD9n4lMg9G6aN00ws0ptsAaY/Fu/M7xW4zICf7OLfocVltxS30wvNQ8oIbUyZS1tw=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz?cache=0&sync_timestamp=1585869208651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprelude-ls%2Fdownload%2Fprelude-ls-1.1.2.tgz",
@@ -8925,6 +9161,16 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npm.taobao.org/proxy-addr/download/proxy-addr-2.0.6.tgz",
@@ -9023,8 +9269,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&sync_timestamp=1588542788766&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY="
     },
     "query-string": {
       "version": "4.3.4",
@@ -9091,6 +9336,11 @@
         "unpipe": "1.0.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-5.2.0.tgz",
@@ -9433,7 +9683,6 @@
       "version": "1.17.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.17.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.17.0.tgz",
       "integrity": "sha1-sllBtUloIxzC0bt2p5y38sC/hEQ=",
-      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -11135,6 +11384,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1595984165719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-autosuggest": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vue-autosuggest/-/vue-autosuggest-2.2.0.tgz",
+      "integrity": "sha512-cHgEakpoRUOaqXXEo8RcRrbSTM3eAaCu9b55ZXiKbaS6IUD8ewqffQrMy/A1DXqHSQbyEEGui4oAsCbRge29Jg=="
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",
@@ -11172,6 +11426,15 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-instantsearch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-instantsearch/-/vue-instantsearch-3.1.0.tgz",
+      "integrity": "sha512-N5dMayDjsWBP7hNXY0OSapYHFtcoG42J0kiFfRYBWyRVrOB7fekOybKBp8iGjZicAeJbiqTbUQa/wRIMtJQBWQ==",
+      "requires": {
+        "algoliasearch-helper": "^3.1.0",
+        "instantsearch.js": "^4.7.0"
+      }
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1593355771696&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",
@@ -11198,6 +11461,73 @@
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1596470252029&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz",
       "integrity": "sha1-Tjirw0oRxBtsPYJERJouNjumJQs="
     },
+    "vue-server-renderer": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz",
+      "integrity": "sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==",
+      "requires": {
+        "chalk": "^1.1.3",
+        "hash-sum": "^1.0.2",
+        "he": "^1.1.0",
+        "lodash.template": "^4.5.0",
+        "lodash.uniq": "^4.5.0",
+        "resolve": "^1.2.0",
+        "serialize-javascript": "^2.1.2",
+        "source-map": "0.5.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
+        },
+        "serialize-javascript": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
+        },
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",

client/package.json

@@ -8,12 +8,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "algoliasearch": "^4.3.1",
     "axios": "^0.18.1",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
+    "instantsearch.css": "7.1.0",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-autosuggest": "^2.2.0",
+    "vue-instantsearch": "^3.1.0",
+    "vue-router": "^3.2.0",
+    "vue-server-renderer": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.0",

client/src/App.vue

@@ -1,32 +1,69 @@
 <template>
     <div id="app">
-        <b-container :fluid=true class="py-5 px-5">
+        <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+            <b-row class="my-3 pl-1">
+                <b-col lg="3" xl="2" md="12">
+                    <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
+                        <ais-search-box placeholder="Search here…"/>
+                    </ais-instant-search>
+                </b-col>
+            </b-row>
             <b-row>
                 <b-col lg="3" xl="2" md="12">
                     <SeasonList></SeasonList>
                 </b-col>
-                <b-col>
+                <b-col class="pt-md-2 pt-lg-0">
                     <router-view/>
                 </b-col>
-                <b-col md="0" lg="1" xl="2">
-
-                </b-col>
+                <b-col md="0" lg="0" xl="2"></b-col>
             </b-row>
         </b-container>
     </div>
 </template>
 
-<style>
-    body { background-color: #0a0a0a; }
+<style lang="scss">
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+    body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; }
+
+    .ais-SearchBox-form {
+        border: none;
+    }
+
+    .ais-SearchBox-input {
+        color: #d7d7d7;
+        background-color: #3e3e3e;
+        border-color: transparent;
+        border-radius: 1px;
+    }
+
+    .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon {
+        > path { fill: #bcbcbc; }
+    }
+
+    .ais-SearchBox-input::placeholder {
+        color: white;
+    }
+
 </style>
 
 <script>
+import algoliasearch from 'algoliasearch/lite';
 import SeasonList from './components/SeasonList.vue';
+import 'instantsearch.css/themes/algolia-min.css';
 
 export default {
   name: 'App',
   components: {
     SeasonList,
   },
+  data() {
+    return {
+      searchClient: algoliasearch(
+        process.env.VUE_APP_ALGOLIA_APP_ID,
+        process.env.VUE_APP_ALGOLIA_API_KEY,
+      ),
+    };
+  },
 };
 </script>

client/src/components/Episode.vue

@@ -7,7 +7,7 @@
             </span>
         </b-card>
         <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
-                class="mb-1" body-class="pb-0">
+                class="mb-1" body-class="p-0 py-2">
             <b-card-text>
                 <QuoteList :quotes="scene.quotes"></QuoteList>
             </b-card-text>
@@ -15,6 +15,10 @@
     </div>
 </template>
 
+<style>
+    .card-title { font-family: 'Montserrat', sans-serif; font-weight: 600; }
+</style>
+
 <script>
 import axios from 'axios';
 import QuoteList from './QuoteList.vue';

client/src/components/QuoteList.vue

@@ -1,25 +1,25 @@
 <template>
-    <table class="quote-list mb-4 px-3 w-100">
+    <table class="quote-list px-3 w-100">
         <tr v-for="(quote, index) in quotes" :key="`quote-${index}`">
             <td class="quote-speaker pl-3" v-if="quote.speaker">
                 <span class="my-3">
                     {{ quote.speaker }}
                 </span>
             </td>
-            <td class="quote-text w-100">{{ quote.text }}</td>
+            <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
         </tr>
     </table>
 </template>
 
 <style lang="scss">
-    tr {
-        &:not(:first-child) {
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-        }
-    }
-
+    /*tr {*/
+    /*    &:not(:first-child) {*/
+    /*        border-top: 1px solid rgba(255, 255, 255, 0.1);*/
+    /*    }*/
+    /*}*/
     .quote-list > tr {
         white-space: nowrap;
+        &:hover { background-color: #242424; }
     }
 
     .quote-text {
@@ -27,11 +27,12 @@
     }
 
     .quote-speaker {
-        /*min-width: 100px;*/
+        min-width: 100px;
         padding-right: 1em;
         font-weight: 600;
         vertical-align: text-top;
         text-align: right;
+        font-family: 'Montserrat', sans-serif;
     }
 </style>
 

client/src/components/SeasonList.vue

@@ -5,7 +5,6 @@
                 <a class="no-link" v-b-toggle="'accordion-' + season.season_id">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
-                        <i class="fas fa-chevron-down float-right"></i>
                     </h5>
                 </a>
             </b-card-header>
@@ -25,7 +24,7 @@
 </template>
 
 <style lang="scss">
-    .season-title { color: #a2a2a2; }
+    .season-title { color: #a2a2a2; cursor: pointer; }
 
     .accordion.list-group-item {
         border-radius: 0;
@@ -35,9 +34,7 @@
         font-weight: 500;
 
         &:first-child { border-top-width: 1px; }
-
         &:last-child { border-bottom-width: 0; }
-
     }
 
     .accordion {
@@ -53,6 +50,7 @@
     .card-header {
         background-color: #161616;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+        font-family: 'Montserrat', sans-serif;
     }
 
     .card {
@@ -70,6 +68,8 @@
         color: #a0a0a0;
         border-left-width: 0;
         border-right-width: 0;
+
+        &:hover { background-color: #161616; }
     }
 
     .no-link {

client/src/main.js

@@ -1,10 +1,13 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
+import InstantSearch from 'vue-instantsearch';
 import App from './App.vue';
 import router from './router';
 
 Vue.use(BootstrapVue);
+Vue.use(InstantSearch);
+
 Vue.config.productionTip = false;
 
 new Vue({