feat: pimp the npm run dev example using instant search data

fixes #20
algolia · Aug 1, 2015 · ea666ad · ea666ad
1 parent 32c64e6
commit ea666ad
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 8 deletions.
diff --git a/example/app.js b/example/app.js
@@ -1,14 +1,16 @@
+require('./style.css');
+
 var instantsearch = require('../');
 
 var instant = new instantsearch.InstantSearch(
-  'JTH1JDTDFT',
-  '34a4c1b994546fbec45a670a06ba0c33',
-  'Bibliotheques'
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76',
+  'bestbuy'
 );
 
 instant.addWidget(instantsearch.widgets.searchbox({
   container: '#search-box',
-  placeholder: 'Search for libraries in France...'
+  placeholder: 'Search for products in France...'
 }));
 
 instant.addWidget(instantsearch.widgets.results({

diff --git a/example/index.html b/example/index.html
@@ -2,11 +2,26 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Instant search example</title>
+  <title>Instant search demo built with instantsearch.js</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 </head>
 <body>
-  <div id="search-box"></div>
-  <div id="hits"></div>
+  <div class="container">
+    <div class="page-header">
+      <h1>Instant search demo <small>using instantsearch.js</small></h1>
+    </div>
+
+    <div class="row">
+      <div class="col-md-3">
+
+        <div id="search-box"></div>
+      </div>
+      <div class="col-md-9">
+        <div id="hits"></div>
+      </div>
+    </div>
+  </div>
 
   <script src="bundle.js"></script>
 </body>

diff --git a/example/style.css b/example/style.css
@@ -0,0 +1,14 @@
+body {
+  padding: 2em 0;
+}
+
+.hit + .hit {
+  margin-top: 1em;
+  padding-top: 1em;
+  border-top: 1px solid #bbb;
+}
+
+.hit em {
+  font-style: normal;
+  background-color: lightcyan;
+}
diff --git a/example/templates/hit.html b/example/templates/hit.html
@@ -1 +1,10 @@
-<div>{{libelle1}}</div>
+<div class="media">
+  <a class="pull-left" href="{{url}}">
+    <img class="media-object" src="{{image}}">
+  </a>
+  <div class="media-body">
+    <h3 class="pull-right text-right text-info">${{salePrice}}</h3>
+    <h4>{{{_highlightResult.name.value}}}</h4>
+    <p>{{{_highlightResult.shortDescription.value}}}</p>
+  </div>
+</div>
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "babel": "5.8.19",
     "babel-eslint": "4.0.5",
     "babel-loader": "5.3.2",
+    "css-loader": "0.15.6",
     "eslint": "0.24.1",
     "eslint-config-airbnb": "0.0.7",
     "eslint-config-algolia": "2.1.2",
@@ -40,6 +41,7 @@
     "sinon": "1.15.4",
     "tap-spec": "4.0.2",
     "tape": "4.0.1",
+    "style-loader": "0.12.3",
     "uglifyjs": "2.4.10",
     "webpack": "1.10.5",
     "webpack-dev-server": "1.10.1"

diff --git a/webpack.example.config.js b/webpack.example.config.js
@@ -10,6 +10,8 @@ module.exports = {
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
     }, {
       test: /\.html$/, exclude: /node_modules/, loader: 'raw'
+    }, {
+      test: /\.css$/, loader: 'style-loader!css-loader'
     }]
   },
   devServer: {