Add css template and html playground

bidoubiwa · bidoubiwa · commit 0588ca93e5ba · 2021-01-25T17:56:16.000+01:00
diff --git a/playgrounds/html/.gitignore b/playgrounds/html/.gitignore
@@ -0,0 +1 @@
+.parcel_cache/
diff --git a/playgrounds/html/README.md b/playgrounds/html/README.md
@@ -0,0 +1,36 @@
+# MeiliSearch Simple Game Search
+
+This repository is a **playground**, all the following files are hot-reloading:
+- _ROOT_/src/*
+- _ROOT_/template/basic_search.css
+- ./public/index.html
+
+meaning you can change the code of this demo but also `instant-meilisearch` and it will hot reload (if you run it with `yarn serve`).
+
+The main purpose of this example is to showcase that instant-meilisearch can be easely included in an existing front-end application using `<script>` tags.
+
+The demo in this directory showcases a basic search that will let you search through games names.
+
+[![Nobel prices demo](asset/stardew.gif)](https://nobel.meilisearch.com)
+
+## Project setup
+
+```bash
+$ yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+💡 If you have never used InstantSearch, we recommend reading this [getting started documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).
diff --git a/playgrounds/html/package.json b/playgrounds/html/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "parcel serve ./public/index.html --global instantMeiliSearch --open",
+    "build": "parcel build ./public/index.html --global instantMeiliSearch"
+  },
+  "browserslist": [
+    "last 3 and_chr versions",
+    "last 3 chrome versions",
+    "last 3 opera versions",
+    "last 3 ios_saf versions",
+    "last 3 safari versions"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "parcel-bundler": "^1.12.4"
+  }
+}
diff --git a/playgrounds/html/public/index.html b/playgrounds/html/public/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!--
+    To use this browser build, please change the following stylesheet tag with this CDN
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
+   -->
+    <link rel="stylesheet" href="../../../templates/basic_search.css" />
+  </head>
+  <body>
+  <div class="wrapper">
+    <div id="searchbox" focus></div>
+    <div id="hits"></div>
+  </div>
+  <!--
+    To use this browser build, please change the following script tag with this CDN
+    <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
+   -->
+    <script src="../../../src/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
+    <script>
+      console.log(instantMeiliSearch)
+      instantMeiliSearch = instantMeiliSearch.default
+        const search = instantsearch({
+            indexName: "steam-video-games",
+            searchClient: instantMeiliSearch(
+              "https://demos.meilisearch.com",
+              "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
+            )
+            });
+            search.addWidgets([
+            instantsearch.widgets.searchBox({
+                container: "#searchbox",
+                placeholder: "Search..",
+            }),
+            instantsearch.widgets.configure({
+              hitsPerPage: 8,
+            }),
+            instantsearch.widgets.hits({
+                container: "#hits",
+                templates: {
+                item: `
+                    <div>
+                    <div class="hit-name">
+                        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+                    </div>
+                    </div>
+                `
+                }
+            })
+            ]);
+
+            search.start();
+    </script>
+  </body>
+</html>
+
diff --git a/playgrounds/html/yarn.lock b/playgrounds/html/yarn.lock
diff --git a/templates/basic_search.css b/templates/basic_search.css
