Add Demo deployment and link

README.md

@@ -1,14 +1,18 @@
 # Books Search
 
-Under the hood:
+## [**Demo**](https://books-search.mrkosima.now.sh)
+
+![books-search](/docs/books-search.gif "Books Search")
+
+### Under the hood:
 - TypeScript
 - [lit-html](https://github.com/polymer/lit-html)
 - [lit-elements](https://github.com/polymer/lit-element)
 - [Speech Recongition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
 - [Open Library API](https://openlibrary.org/developers/api)
 
 
-Useful resources:
+#### Useful resources:
 - [Custom Elements v1: Reusable Web Components](https://developers.google.com/web/fundamentals/web-components/customelements)
 - [Using the Web Speech API
 ](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)

now.json

@@ -0,0 +1,32 @@
+{
+    "version": 2,
+    "name": "books-search",
+    "builds": [
+      {
+        "src": "package.json",
+        "use": "@now/static-build",
+        "config": { "distDir": "build" }
+      }
+    ],
+    "routes": [
+      {
+        "src": "/static/(.*)",
+        "headers": { "cache-control": "s-maxage=31536000,immutable" },
+        "dest": "/static/$1"
+      },
+      { "src": "/favicon.ico", "dest": "/favicon.ico" },
+      { "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
+      { "src": "/manifest.json", "dest": "/manifest.json" },
+      { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
+      {
+        "src": "/service-worker.js",
+        "headers": { "cache-control": "s-maxage=0" },
+        "dest": "/service-worker.js"
+      },
+      {
+        "src": "/(.*)",
+        "headers": { "cache-control": "s-maxage=0" },
+        "dest": "/index.html"
+      }
+    ]
+  }

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "start": "webpack-dev-server --config webpack.dev.js",
     "lint": "eslint",
-    "build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.prod.js",
+    "now-build": "yarn build"
   },
   "repository": {
     "type": "git",

src/api/booksService.ts

@@ -22,7 +22,7 @@ export interface Book {
 
 export type Books = Book[];
 
-const SEARCH_API = "http://openlibrary.org/search.json";
+const SEARCH_API = "https://openlibrary.org/search.json";
 
 const prepareQueryString = (text: string) =>
   text
@@ -41,7 +41,7 @@ const getCoverUrl = (
   value: string,
   size: "S" | "M" | "L"
 ) =>
-  `http://covers.openlibrary.org/a/${key}/${value}-${size}.jpg?default=false`;
+  `https://covers.openlibrary.org/a/${key}/${value}-${size}.jpg?default=false`;
 
 const getCoverUrls = (coverId: number): CoverUrils => ({
   small: getCoverUrl("id", coverId.toString(), "S"),

webpack.common.js

@@ -7,8 +7,9 @@ module.exports = {
     booksSearch: "./src"
   },
   output: {
-    filename: "[name].[chunkhash].bundle.js",
-    path: path.resolve(__dirname, "build")
+    filename: "static/[name].[chunkhash].bundle.js",
+    path: path.resolve(__dirname, "build"),
+
   },
   module: {
     rules: [
@@ -25,7 +26,8 @@ module.exports = {
       title: "Books Search",
       template: "./public/index.html",
       favicon: "./public/favicon.ico",
-      inject: "head"
+      inject: "head",
+      baseUrl: "/"
     })
   ]
 };