From ad328c03f0c6162b4f803d1e44e9ce443aed6653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:21:49 +0200
Subject: [PATCH 1/7] feat(cli): Accept multiple attributes to display

BREAKING CHANGE: The option `mainAttribute` has been renamed `attributesToDisplay` and now accepts multiple attributes.

Closes #151
---
 src/cli/__tests__/isQuestionAsked.test.js |  4 ++--
 src/cli/index.js                          | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/cli/__tests__/isQuestionAsked.test.js b/src/cli/__tests__/isQuestionAsked.test.js
index e7c002c52..9a1d45407 100644
--- a/src/cli/__tests__/isQuestionAsked.test.js
+++ b/src/cli/__tests__/isQuestionAsked.test.js
@@ -42,11 +42,11 @@ test('with valid template should not ask', () => {
   ).toBe(false);
 });
 
-test('with indexName should ask mainAttribute', () => {
+test('with indexName should ask attributesToDisplay', () => {
   expect(
     isQuestionAsked({
       question: {
-        name: 'mainAttribute',
+        name: 'attributesToDisplay',
       },
       args: { indexName: 'INDEX_NAME' },
     })
diff --git a/src/cli/index.js b/src/cli/index.js
index 462826ea1..da6dae209 100755
--- a/src/cli/index.js
+++ b/src/cli/index.js
@@ -33,8 +33,8 @@ program
   .option('--api-key <apiKey>', 'The Algolia search API key')
   .option('--index-name <indexName>', 'The main index of your search')
   .option(
-    '--main-attribute <mainAttribute>',
-    'The main searchable attribute of your index'
+    '--attributes-to-display <attributesToDisplay>',
+    'The attributes of your index to display'
   )
   .option(
     '--attributes-for-faceting <attributesForFaceting>',
@@ -75,6 +75,10 @@ if (!appPath) {
 
 const optionsFromArguments = getOptionsFromArguments(options.rawArgs);
 const appName = optionsFromArguments.name || path.basename(appPath);
+const attributesToDisplay = (optionsFromArguments.attributesToDisplay || '')
+  .split(',')
+  .filter(Boolean)
+  .map(x => x.trim());
 
 try {
   checkAppPath(appPath);
@@ -177,10 +181,11 @@ const questions = [
     message: 'Index name',
   },
   {
-    type: 'list',
-    name: 'mainAttribute',
+    type: 'checkbox',
+    name: 'attributesToDisplay',
     message: 'Attribute to display',
     suffix: `\n  ${chalk.gray('Used to generate the default result template')}`,
+    pageSize: 10,
     choices: async answers => [
       {
         name: 'None',
@@ -190,7 +195,9 @@ const questions = [
       new inquirer.Separator('From your index'),
       ...(await getAttributesFromIndex(answers)),
     ],
-    when: ({ appId, apiKey, indexName }) => appId && apiKey && indexName,
+    filter: attributes => attributes.filter(Boolean),
+    when: ({ appId, apiKey, indexName }) =>
+      !attributesToDisplay.length > 0 && appId && apiKey && indexName,
   },
 ].filter(question => isQuestionAsked({ question, args: optionsFromArguments }));
 
@@ -204,6 +211,7 @@ async function run() {
       options: {
         ...optionsFromArguments,
         name: appName,
+        attributesToDisplay,
       },
       answers: await inquirer.prompt(questions),
     })),

From df54031d87322bc061ecd090d269ada9c08df1b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:22:54 +0200
Subject: [PATCH 2/7] docs(readme): Document `attributesToDisplay`

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f810ec911..c7f4145af 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ $ create-instantsearch-app --help
     --app-id <appId>                                   The application ID
     --api-key <apiKey>                                 The Algolia search API key
     --index-name <indexName>                           The main index of your search
-    --main-attribute <mainAttribute>                   The main searchable attribute of your index
+    --attributes-to-display <attributesToDisplay>      The attributes of your index to display
     --attributes-for-faceting <attributesForFaceting>  The attributes for faceting
     --template <template>                              The InstantSearch template to use
     --library-version <libraryVersion>                 The version of the library
@@ -110,7 +110,7 @@ The `config` flag is handy to automate app generations.
   "apiKey": "MY_API_KEY",
   "indexName": "MY_INDEX_NAME",
   "searchPlaceholder": "Search",
-  "mainAttribute": "name",
+  "attributesToDisplay": ["name", "description"],
   "attributesForFaceting": ["brand", "location"]
 }
 ```
@@ -131,7 +131,7 @@ const createInstantSearchApp = require('create-instantsearch-app');
 const app = createInstantSearchApp('~/lab/my-app', {
   template: 'InstantSearch.js',
   libraryVersion: '2.0.0',
-  mainAttribute: 'name',
+  attributesToDisplay: ['name', 'description'],
   attributesForFaceting: ['keywords'],
 });
 

From 0718a76f4ba8c2269864cfee6f1cb00a56a50e95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:23:35 +0200
Subject: [PATCH 3/7] test(e2e): Update tests with `attributesToDisplay`

---
 scripts/e2e-templates.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/e2e-templates.test.js b/scripts/e2e-templates.test.js
index 064ca1699..43fafb882 100644
--- a/scripts/e2e-templates.test.js
+++ b/scripts/e2e-templates.test.js
@@ -33,14 +33,14 @@ describe('Templates', () => {
         appPath = `${temporaryDirectory}/${templateConfig.appName}`;
 
         const config = {
-          name: `${templateConfig.appName}`,
+          name: templateConfig.appName,
           template: templateName,
           libraryVersion: '1.0.0',
           appId: 'appId',
           apiKey: 'apiKey',
           indexName: 'indexName',
           searchPlaceholder: 'Search placeholder',
-          mainAttribute: 'mainAttribute',
+          attributesToDisplay: ['attribute1', 'attribute2'],
           attributesForFaceting: ['facet1', 'facet2'],
         };
 

From 78b6a6f9846e5dd5c29c4ec7aa0b349a1a58e5ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:24:13 +0200
Subject: [PATCH 4/7] build(release): Update release-template script with
 `attributesToDisplay`

---
 scripts/release-templates.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/scripts/release-templates.js b/scripts/release-templates.js
index 0fe81e95f..4910adff9 100644
--- a/scripts/release-templates.js
+++ b/scripts/release-templates.js
@@ -24,10 +24,6 @@ const GITHUB_REPOSITORY =
 const TEMPLATES_BRANCH = 'templates';
 const BUILD_FOLDER = 'build';
 
-const APP_ID = 'latency';
-const API_KEY = '6be0576ff61c053d5f9a3225e2a90f76';
-const INDEX_NAME = 'instant_search';
-
 function cleanup() {
   if (fs.existsSync(BUILD_FOLDER)) {
     execSync(`rm -rf ${BUILD_FOLDER}`);
@@ -73,10 +69,10 @@ async function build() {
         libraryVersion:
           libraryName &&
           (await fetchLibraryVersions(libraryName).then(latestSemver)),
-        appId: APP_ID,
-        apiKey: API_KEY,
-        indexName: INDEX_NAME,
-        mainAttribute: 'name',
+        appId: 'latency',
+        apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
+        indexName: 'instant_search',
+        attributesToDisplay: ['name', 'description'],
         attributesForFaceting: ['brand'],
         installation: false,
         silent: true,

From fe268e47ed4de581ae423a57d6bcea6f72945a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:24:48 +0200
Subject: [PATCH 5/7] feat(templates): Update templates with
 `attributesToDisplay`

---
 .../src/app/app.component.html.hbs            | 28 +++++++++++
 src/templates/Autocomplete.js/src/app.js.hbs  |  6 +--
 .../InstantSearch Android/app/build.gradle    |  2 +-
 .../app}/ExampleInstrumentedTest.java         |  0
 .../instantsearch/mvp/MainActivity.java       | 22 ---------
 .../instantsearch/app/MainActivity.java       |  4 +-
 .../app/src/main/res/layout/activity_main.xml |  6 +--
 .../app/src/main/res/layout/hits_item.xml     | 46 ++++++++++++++++---
 .../InstantSearch iOS/App/AppDelegate.swift   |  4 +-
 .../App/ViewController.swift                  |  2 +-
 src/templates/InstantSearch.js/src/app.js.hbs | 13 ++++--
 .../JavaScript Client/index.html.hbs          |  2 +
 src/templates/JavaScript Client/src/app.css   |  2 +-
 .../JavaScript Client/src/app.js.hbs          | 24 ++++++++--
 src/templates/JavaScript Helper/src/app.css   |  3 +-
 .../JavaScript Helper/src/app.js.hbs          | 24 ++++++++--
 .../React InstantSearch Native/package.json   |  2 +-
 .../src/InfiniteHits.js.hbs                   | 24 +++++++---
 .../src/SearchBox.js.hbs                      | 17 +++++--
 .../React InstantSearch/src/App.js.hbs        | 23 +++++++---
 src/templates/Vue InstantSearch/src/App.vue   | 21 +++++++--
 21 files changed, 198 insertions(+), 77 deletions(-)
 rename src/templates/InstantSearch Android/app/src/androidTest/java/com/{algolia/instantsearch/mvp => example/instantsearch/app}/ExampleInstrumentedTest.java (100%)
 delete mode 100644 src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java
 rename src/templates/InstantSearch Android/app/src/main/java/com/{algolia => example}/instantsearch/app/MainActivity.java (88%)

diff --git a/src/templates/Angular InstantSearch/src/app/app.component.html.hbs b/src/templates/Angular InstantSearch/src/app/app.component.html.hbs
index c7218e917..71d94515c 100644
--- a/src/templates/Angular InstantSearch/src/app/app.component.html.hbs	
+++ b/src/templates/Angular InstantSearch/src/app/app.component.html.hbs	
@@ -26,7 +26,35 @@
           <ais-search-box placeholder="{{searchPlaceholder}}"></ais-search-box>
         </div>
 
+        {{#if attributesToDisplay}}
+        <ais-hits>
+          <ng-template let-hits="hits" let-results="results">
+            <div *ngIf="hits.length === 0">
+              No results found matching <strong></strong>.
+            </div>
+
+            <ol class="ais-Hits-list">
+              <li class="ais-Hits-item" *ngFor="let hit of hits">
+                <article>
+                  <h1>
+                    <ais-highlight attribute="{{attributesToDisplay.[0]}}" [hit]="hit"></ais-highlight>
+                  </h1>
+
+                  {{#each attributesToDisplay}}
+                  {{#unless @first}}
+                  <p>
+                    <ais-highlight attribute="{{this}}" [hit]="hit"></ais-highlight>
+                  </p>
+                  {{/unless}}
+                  {{/each}}
+                </article>
+              </li>
+            </ol>
+          </ng-template>
+        </ais-hits>
+        {{else}}
         <ais-hits></ais-hits>
+        {{/if}}
 
         <div class="pagination">
           <ais-pagination></ais-pagination>
diff --git a/src/templates/Autocomplete.js/src/app.js.hbs b/src/templates/Autocomplete.js/src/app.js.hbs
index 9bca5d3aa..619f13153 100644
--- a/src/templates/Autocomplete.js/src/app.js.hbs
+++ b/src/templates/Autocomplete.js/src/app.js.hbs
@@ -9,11 +9,11 @@ const $hits = document.querySelector('#hits');
 autocomplete('#searchBox input[type=search]', { hint: false }, [
   {
     source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: '{{mainAttribute}}',
+    displayKey: '{{attributesToDisplay.[0]}}',
     templates: {
       suggestion(suggestion) {
-        {{#if mainAttribute}}
-        return suggestion._highlightResult.{{mainAttribute}}.value;
+        {{#if attributesToDisplay.[0]}}
+        return suggestion._highlightResult.{{attributesToDisplay.[0]}}.value;
         {{else}}
         return JSON.stringify(suggestion);
         {{/if}}
diff --git a/src/templates/InstantSearch Android/app/build.gradle b/src/templates/InstantSearch Android/app/build.gradle
index ecd78673d..e63fc83ca 100644
--- a/src/templates/InstantSearch Android/app/build.gradle	
+++ b/src/templates/InstantSearch Android/app/build.gradle	
@@ -27,6 +27,6 @@ dependencies {
     })
     implementation 'com.android.support:appcompat-v7:27.1.1'
     implementation 'com.android.support.constraint:constraint-layout:1.1.2'
-    implementation 'com.example:instantsearch-android:1.12.0'
+    implementation 'com.algolia:instantsearch-android:1.12.1'
     testImplementation 'junit:junit:4.12'
 }
diff --git a/src/templates/InstantSearch Android/app/src/androidTest/java/com/algolia/instantsearch/mvp/ExampleInstrumentedTest.java b/src/templates/InstantSearch Android/app/src/androidTest/java/com/example/instantsearch/app/ExampleInstrumentedTest.java
similarity index 100%
rename from src/templates/InstantSearch Android/app/src/androidTest/java/com/algolia/instantsearch/mvp/ExampleInstrumentedTest.java
rename to src/templates/InstantSearch Android/app/src/androidTest/java/com/example/instantsearch/app/ExampleInstrumentedTest.java
diff --git a/src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java b/src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java
deleted file mode 100644
index e626bf991..000000000
--- a/src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java	
+++ /dev/null
@@ -1,22 +0,0 @@
-package com.example.instantsearch.app;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-
-import com.example.instantsearch.helpers.Searcher;
-import com.example.instantsearch.helpers.InstantSearch;
-
-public class MainActivity extends AppCompatActivity {
-    private static final String ALGOLIA_APP_ID = "latency";
-    private static final String ALGOLIA_SEARCH_API_KEY = "3d9875e51fbd20c7754e65422f7ce5e1";
-    private static final String ALGOLIA_INDEX_NAME = "bestbuy";
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        setContentView(R.layout.activity_main);
-        final Searcher searcher = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY, ALGOLIA_INDEX_NAME);
-        final InstantSearch helper = new InstantSearch(this, searcher);
-        helper.search(); // First empty search to display default results
-    }
-}
diff --git a/src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/app/MainActivity.java b/src/templates/InstantSearch Android/app/src/main/java/com/example/instantsearch/app/MainActivity.java
similarity index 88%
rename from src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/app/MainActivity.java
rename to src/templates/InstantSearch Android/app/src/main/java/com/example/instantsearch/app/MainActivity.java
index 3aed07aca..520ea6274 100644
--- a/src/templates/InstantSearch Android/app/src/main/java/com/algolia/instantsearch/app/MainActivity.java	
+++ b/src/templates/InstantSearch Android/app/src/main/java/com/example/instantsearch/app/MainActivity.java	
@@ -3,8 +3,8 @@
 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 
-import com.example.instantsearch.helpers.Searcher;
-import com.example.instantsearch.helpers.InstantSearch;
+import com.algolia.instantsearch.helpers.Searcher;
+import com.algolia.instantsearch.helpers.InstantSearch;
 
 public class MainActivity extends AppCompatActivity {
     private static final String ALGOLIA_APP_ID = "{{appId}}";
diff --git a/src/templates/InstantSearch Android/app/src/main/res/layout/activity_main.xml b/src/templates/InstantSearch Android/app/src/main/res/layout/activity_main.xml
index 4884d2314..8dc93fd00 100644
--- a/src/templates/InstantSearch Android/app/src/main/res/layout/activity_main.xml	
+++ b/src/templates/InstantSearch Android/app/src/main/res/layout/activity_main.xml	
@@ -9,13 +9,13 @@
     android:orientation="vertical"
     tools:context="com.example.instantsearch.app.MainActivity">
 
-    <com.example.instantsearch.ui.views.SearchBox
+    <com.algolia.instantsearch.ui.views.SearchBox
         android:id="@+id/search_box"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginBottom="10dp"/>
+        android:layout_marginBottom="16dp"/>
 
-    <com.example.instantsearch.ui.views.Hits
+    <com.algolia.instantsearch.ui.views.Hits
         android:id="@+id/hits"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
diff --git a/src/templates/InstantSearch Android/app/src/main/res/layout/hits_item.xml b/src/templates/InstantSearch Android/app/src/main/res/layout/hits_item.xml
index 8dee7e635..5faab8f92 100644
--- a/src/templates/InstantSearch Android/app/src/main/res/layout/hits_item.xml	
+++ b/src/templates/InstantSearch Android/app/src/main/res/layout/hits_item.xml	
@@ -1,21 +1,53 @@
 <?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:algolia="http://schemas.android.com/apk/res-auto"
-        xmlns:android="http://schemas.android.com/apk/res/android">
+<layout
+    xmlns:algolia="http://schemas.android.com/apk/res-auto"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+>
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
+        android:orientation="vertical"
+        android:padding="16dp"
+    >
 
         <TextView
-            android:id="@+id/{{mainAttribute}}"
+            android:id="@+id/{{attributesToDisplay.[0]}}"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="10dp"
-            android:text="{{mainAttribute}}"
+            android:text="{{attributesToDisplay.[0]}}"
             android:textSize="20sp"
-            algolia:attribute='@{"{{mainAttribute}}"}'
+            android:textStyle="bold"
+            algolia:attribute='@{"{{attributesToDisplay.[0]}}"}'
             algolia:highlightColor="@color/colorAccent"
             algolia:highlighted="@{true}"/>
+
+        {{#each attributesToDisplay}}
+        {{#unless @first}}
+        <TextView
+            android:id="@+id/{{this}}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:text="{{this}}"
+            android:textSize="20sp"
+            algolia:attribute='@{"{{this}}"}'
+            algolia:highlightColor="@color/colorAccent"
+            algolia:highlighted="@{true}"
+          />
+
+        {{/unless}}
+        {{/each}}
+          <TextView
+            android:id="@+id/description"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:text="description"
+            android:textSize="20sp"
+            algolia:attribute='@{"description"}'
+            algolia:highlightColor="@color/colorAccent"
+            algolia:highlighted="@{true}"
+        />
     </LinearLayout>
 </layout>
diff --git a/src/templates/InstantSearch iOS/App/AppDelegate.swift b/src/templates/InstantSearch iOS/App/AppDelegate.swift
index d5dde1a20..0c7c5d357 100755
--- a/src/templates/InstantSearch iOS/App/AppDelegate.swift	
+++ b/src/templates/InstantSearch iOS/App/AppDelegate.swift	
@@ -13,8 +13,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.
         InstantSearch.shared.configure(appID: ALGOLIA_APP_ID, apiKey: ALGOLIA_API_KEY, index: ALGOLIA_INDEX_NAME)
-        InstantSearch.shared.params.attributesToRetrieve = ["{{mainAttribute}}"]
-        InstantSearch.shared.params.attributesToHighlight = ["{{mainAttribute}}"]
+        InstantSearch.shared.params.attributesToRetrieve = [{{#each attributesToDisplay}}"{{this}}"{{#unless @last}}, {{/unless}}{{/each}}]
+        InstantSearch.shared.params.attributesToHighlight = [{{#each attributesToDisplay}}"{{this}}"{{#unless @last}}, {{/unless}}{{/each}}]
 
         return true
     }
diff --git a/src/templates/InstantSearch iOS/App/ViewController.swift b/src/templates/InstantSearch iOS/App/ViewController.swift
index 09886942d..ef632e77b 100755
--- a/src/templates/InstantSearch iOS/App/ViewController.swift	
+++ b/src/templates/InstantSearch iOS/App/ViewController.swift	
@@ -26,7 +26,7 @@ class ViewController: HitsTableViewController {
 
         cell.textLabel?.highlightedTextColor = .blue
         cell.textLabel?.highlightedBackgroundColor = .yellow
-        cell.textLabel?.highlightedText = SearchResults.highlightResult(hit: hit, path: "name")?.value
+        cell.textLabel?.highlightedText = SearchResults.highlightResult(hit: hit, path: "{{attributesToDisplay.[0]}}")?.value
 
         return cell
     }
diff --git a/src/templates/InstantSearch.js/src/app.js.hbs b/src/templates/InstantSearch.js/src/app.js.hbs
index 13c7c4533..3ee3f8802 100644
--- a/src/templates/InstantSearch.js/src/app.js.hbs
+++ b/src/templates/InstantSearch.js/src/app.js.hbs
@@ -18,12 +18,17 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.hits({
     container: '#hits',
-    {{#if mainAttribute}}
+    {{#if attributesToDisplay}}
     templates: {
       item: `
-        <div>
-          <header>\{{{_highlightResult.{{mainAttribute}}.value}}}</header>
-        </div>
+        <article>
+          <h1>\{{{_highlightResult.{{attributesToDisplay.[0]}}.value}}}</h1>
+          {{#each attributesToDisplay}}
+          {{#unless @first}}
+          <p>\{{{_highlightResult.{{this}}.value}}}</p>
+          {{/unless}}
+          {{/each}}
+        </article>
       `,
     },
     {{/if}}
diff --git a/src/templates/JavaScript Client/index.html.hbs b/src/templates/JavaScript Client/index.html.hbs
index 20feab7c9..0d58d3dcf 100644
--- a/src/templates/JavaScript Client/index.html.hbs	
+++ b/src/templates/JavaScript Client/index.html.hbs	
@@ -9,6 +9,8 @@
   <link rel="manifest" href="./manifest.webmanifest">
   <link rel="shortcut icon" href="./favicon.png">
 
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch-theme-algolia.min.css">
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
 
diff --git a/src/templates/JavaScript Client/src/app.css b/src/templates/JavaScript Client/src/app.css
index 332f3a067..776c6992b 100644
--- a/src/templates/JavaScript Client/src/app.css	
+++ b/src/templates/JavaScript Client/src/app.css	
@@ -55,12 +55,12 @@ em {
   display: grid;
   grid-template-columns: 49% 49%;
   grid-gap: 2%;
-  list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .ais-hits--item {
+  list-style: none;
   min-height: 100px;
   padding: 1rem;
   background: #fff;
diff --git a/src/templates/JavaScript Client/src/app.js.hbs b/src/templates/JavaScript Client/src/app.js.hbs
index cc13f8596..b8179e292 100644
--- a/src/templates/JavaScript Client/src/app.js.hbs	
+++ b/src/templates/JavaScript Client/src/app.js.hbs	
@@ -10,11 +10,29 @@ function renderHits(query) {
   index.search(query).then(result => {
     // Please sanitize user-provided data when using `innerHTML` to avoid XSS
     $hits.innerHTML = `
-      <ul class="ais-hits">
+      <ol class="ais-hits">
         ${result.hits
-          .map(hit => `<li class="ais-hits--item">{{#if mainAttribute}}${hit._highlightResult.{{mainAttribute}}.value}{{else}}${JSON.stringify(hit)}{{/if}}</li>`)
+          .map(
+            hit =>
+              `<li class="ais-hits--item">
+                <article>
+                {{#if attributesToDisplay}}
+                  <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
+                  {{#each attributesToDisplay}}
+                  {{#unless @first}}
+                  <p>${hit._highlightResult.{{this}}.value}</p>
+                  {{/unless}}
+                  {{/each}}
+                {{else}}
+                  <p>
+                    <code>${JSON.stringify(hit).slice(0, 100)}...</code>
+                  </p>
+                {{/if}}
+                </article>
+              </li>`
+          )
           .join('')}
-      </ul>`;
+      </ol>`;
   });
 }
 
diff --git a/src/templates/JavaScript Helper/src/app.css b/src/templates/JavaScript Helper/src/app.css
index 332f3a067..835680225 100644
--- a/src/templates/JavaScript Helper/src/app.css	
+++ b/src/templates/JavaScript Helper/src/app.css	
@@ -55,13 +55,12 @@ em {
   display: grid;
   grid-template-columns: 49% 49%;
   grid-gap: 2%;
-  list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .ais-hits--item {
-  min-height: 100px;
+  list-style: none;
   padding: 1rem;
   background: #fff;
   border-radius: 4px;
diff --git a/src/templates/JavaScript Helper/src/app.js.hbs b/src/templates/JavaScript Helper/src/app.js.hbs
index e00d4af82..5bca4cfa8 100644
--- a/src/templates/JavaScript Helper/src/app.js.hbs	
+++ b/src/templates/JavaScript Helper/src/app.js.hbs	
@@ -16,11 +16,29 @@ $searchBox.addEventListener('input', event => {
 helper.on('result', result => {
   // Please sanitize user-provided data when using `innerHTML` to avoid XSS
   $hits.innerHTML = `
-    <ul class="ais-hits">
+    <ol class="ais-hits">
       ${result.hits
-        .map(hit => `<li class="ais-hits--item">{{#if mainAttribute}}${hit._highlightResult.{{mainAttribute}}.value}{{else}}${JSON.stringify(hit)}{{/if}}</li>`)
+        .map(
+          hit =>
+            `<li class="ais-hits--item">
+              <article>
+              {{#if attributesToDisplay}}
+                <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
+                {{#each attributesToDisplay}}
+                {{#unless @first}}
+                <p>${hit._highlightResult.{{this}}.value}</p>
+                {{/unless}}
+                {{/each}}
+              {{else}}
+                <p>
+                  <code>${JSON.stringify(hit).slice(0, 100)}...</code>
+                </p>
+              {{/if}}
+              </article>
+            </li>`
+        )
         .join('')}
-    </ul>`;
+    </ol>`;
 });
 
 helper.search();
diff --git a/src/templates/React InstantSearch Native/package.json b/src/templates/React InstantSearch Native/package.json
index b49ce6ff1..f2d97fa59 100644
--- a/src/templates/React InstantSearch Native/package.json	
+++ b/src/templates/React InstantSearch Native/package.json	
@@ -16,7 +16,7 @@
     "prop-types": "15.6.2",
     "react": "16.4.1",
     "react-instantsearch-native": "{{libraryVersion}}",
-    "react-native": "0.56.0"
+    "react-native": "0.55.4"
   },
   "devDependencies": {
     "eslint": "5.2.0",
diff --git a/src/templates/React InstantSearch Native/src/InfiniteHits.js.hbs b/src/templates/React InstantSearch Native/src/InfiniteHits.js.hbs
index 5cd7ea1c1..fdd7cf136 100644
--- a/src/templates/React InstantSearch Native/src/InfiniteHits.js.hbs	
+++ b/src/templates/React InstantSearch Native/src/InfiniteHits.js.hbs	
@@ -1,19 +1,22 @@
 import React from 'react';
-import { StyleSheet, {{#unless mainAttribute}}Text, {{/unless}}View, FlatList } from 'react-native';
+import { StyleSheet, Text, View, FlatList } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectInfiniteHits } from 'react-instantsearch-native';
-{{#if mainAttribute}}
+{{#if attributesToDisplay}}
 import Highlight from './Highlight';
 {{/if}}
 
 const styles = StyleSheet.create({
   separator: {
     borderBottomWidth: 1,
+    borderColor: '#ddd',
   },
   item: {
     padding: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  titleText: {
+    fontWeight: 'bold',
   },
 });
 
@@ -25,8 +28,17 @@ const InfiniteHits = ({ hits, hasMore, refine }) => (
     onEndReached={() => hasMore && refine()}
     renderItem={({ item }) => (
       <View style={styles.item}>
-        {{#if mainAttribute}}
-        <Highlight attribute="{{mainAttribute}}" hit={item} />
+        {{#if attributesToDisplay}}
+        <Text style={styles.titleText}>
+          <Highlight attribute="{{attributesToDisplay.[0]}}" hit={item} />
+        </Text>
+        {{#each attributesToDisplay}}
+        {{#unless @first}}
+        <Text>
+          <Highlight attribute="{{this}}" hit={item} />
+        </Text>
+        {{/unless}}
+        {{/each}}
         {{else}}
         <Text>{JSON.stringify(item).slice(0, 100)}</Text>
         {{/if}}
diff --git a/src/templates/React InstantSearch Native/src/SearchBox.js.hbs b/src/templates/React InstantSearch Native/src/SearchBox.js.hbs
index 12ad96c83..69d85d535 100644
--- a/src/templates/React InstantSearch Native/src/SearchBox.js.hbs	
+++ b/src/templates/React InstantSearch Native/src/SearchBox.js.hbs	
@@ -5,13 +5,20 @@ import { connectSearchBox } from 'react-instantsearch-native';
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
-    backgroundColor: '#252b33',
+    padding: 16,
   },
   input: {
-    height: 40,
-    padding: 10,
-    backgroundColor: '#FFFFFF',
+    height: 48,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: '#fff',
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
   },
 });
 
diff --git a/src/templates/React InstantSearch/src/App.js.hbs b/src/templates/React InstantSearch/src/App.js.hbs
index 53428e78d..d1c462901 100644
--- a/src/templates/React InstantSearch/src/App.js.hbs	
+++ b/src/templates/React InstantSearch/src/App.js.hbs	
@@ -8,7 +8,7 @@ import {
   RefinementList,
   {{/if}}
   Pagination,
-  {{#if mainAttribute}}
+  {{#if attributesToDisplay}}
   Highlight,
   {{/if}}
 } from 'react-instantsearch-dom';
@@ -65,13 +65,24 @@ class App extends Component {
 
 function Hit(props) {
   return (
-    <div>
-      {{#if mainAttribute}}
-      <Highlight attribute="{{mainAttribute}}" hit={props.hit} />
+    <article>
+      {{#if attributesToDisplay}}
+      <h1>
+        <Highlight attribute="{{attributesToDisplay.[0]}}" hit={props.hit} />
+      </h1>
+      {{#each attributesToDisplay}}
+      {{#unless @first}}
+      <p>
+        <Highlight attribute="{{this}}" hit={props.hit} />
+      </p>
+      {{/unless}}
+      {{/each}}
       {{else}}
-      <code>{JSON.stringify(props.hit)}</code>
+      <p>
+        <code>{JSON.stringify(props.hit).slice(0, 100)}...</code>
+      </p>
       {{/if}}
-    </div>
+    </article>
   );
 }
 
diff --git a/src/templates/Vue InstantSearch/src/App.vue b/src/templates/Vue InstantSearch/src/App.vue
index 496270950..b50f42f94 100644
--- a/src/templates/Vue InstantSearch/src/App.vue	
+++ b/src/templates/Vue InstantSearch/src/App.vue	
@@ -41,15 +41,26 @@
               }"
             ></ais-search-box>
 
+            {{#if attributesToDisplay}}
             <ais-results class="ais-Hits-list">
-              {{#if mainAttribute}}
               <template slot-scope="{ result }">
-                <div class="ais-Hits-item">
-                  <ais-highlight :result="result" attribute-name="{{mainAttribute}}"></ais-highlight>
-                </div>
+                <article class="ais-Hits-item">
+                  <h1>
+                    <ais-highlight :result="result" attribute-name="{{attributesToDisplay.[0]}}"></ais-highlight>
+                  </h1>
+                  {{#each attributesToDisplay}}
+                  {{#unless @first}}
+                  <p>
+                    <ais-highlight :result="result" attribute-name="{{this}}"></ais-highlight>
+                  </p>
+                  {{/unless}}
+                  {{/each}}
+                </article>
               </template>
-              {{/if}}
             </ais-results>
+            {{else}}
+            <ais-results class="ais-Hits-list"></ais-results>
+            {{/if}}
 
             <div class="pagination">
               <ais-pagination

From bcbde0f7d3c90cf04aea85ff57ebb336b9ea3fec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 14:25:01 +0200
Subject: [PATCH 6/7] test(snapshots): Update template snapshots

---
 .../__snapshots__/e2e-templates.test.js.snap  | 217 ++++++++++++------
 1 file changed, 141 insertions(+), 76 deletions(-)

diff --git a/scripts/__snapshots__/e2e-templates.test.js.snap b/scripts/__snapshots__/e2e-templates.test.js.snap
index 038c2cfcf..6856cf8b7 100644
--- a/scripts/__snapshots__/e2e-templates.test.js.snap
+++ b/scripts/__snapshots__/e2e-templates.test.js.snap
@@ -345,7 +345,27 @@ exports[`Templates Angular InstantSearch File content: src/app/app.component.htm
           <ais-search-box placeholder=\\"Search placeholder\\"></ais-search-box>
         </div>
 
-        <ais-hits></ais-hits>
+        <ais-hits>
+          <ng-template let-hits=\\"hits\\" let-results=\\"results\\">
+            <div *ngIf=\\"hits.length === 0\\">
+              No results found matching <strong></strong>.
+            </div>
+
+            <ol class=\\"ais-Hits-list\\">
+              <li class=\\"ais-Hits-item\\" *ngFor=\\"let hit of hits\\">
+                <article>
+                  <h1>
+                    <ais-highlight attribute=\\"attribute1\\" [hit]=\\"hit\\"></ais-highlight>
+                  </h1>
+
+                  <p>
+                    <ais-highlight attribute=\\"attribute2\\" [hit]=\\"hit\\"></ais-highlight>
+                  </p>
+                </article>
+              </li>
+            </ol>
+          </ng-template>
+        </ais-hits>
 
         <div class=\\"pagination\\">
           <ais-pagination></ais-pagination>
@@ -1181,10 +1201,10 @@ const $hits = document.querySelector('#hits');
 autocomplete('#searchBox input[type=search]', { hint: false }, [
   {
     source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
-    displayKey: 'mainAttribute',
+    displayKey: 'attribute1',
     templates: {
       suggestion(suggestion) {
-        return suggestion._highlightResult.mainAttribute.value;
+        return suggestion._highlightResult.attribute1.value;
       },
     },
   },
@@ -1276,7 +1296,7 @@ dependencies {
     })
     implementation 'com.android.support:appcompat-v7:27.1.1'
     implementation 'com.android.support.constraint:constraint-layout:1.1.2'
-    implementation 'com.example:instantsearch-android:1.12.0'
+    implementation 'com.algolia:instantsearch-android:1.12.1'
     testImplementation 'junit:junit:4.12'
 }"
 `;
@@ -1309,7 +1329,7 @@ exports[`Templates InstantSearch Android File content: app/proguard-rules.pro 1`
 #-renamesourcefileattribute SourceFile"
 `;
 
-exports[`Templates InstantSearch Android File content: app/src/androidTest/java/com/algolia/instantsearch/mvp/ExampleInstrumentedTest.java 1`] = `
+exports[`Templates InstantSearch Android File content: app/src/androidTest/java/com/example/instantsearch/app/ExampleInstrumentedTest.java 1`] = `
 "package com.example.instantsearch.app;
 
 import android.content.Context;
@@ -1362,14 +1382,14 @@ exports[`Templates InstantSearch Android File content: app/src/main/AndroidManif
 </manifest>"
 `;
 
-exports[`Templates InstantSearch Android File content: app/src/main/java/com/algolia/instantsearch/app/MainActivity.java 1`] = `
+exports[`Templates InstantSearch Android File content: app/src/main/java/com/example/instantsearch/app/MainActivity.java 1`] = `
 "package com.example.instantsearch.app;
 
 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 
-import com.example.instantsearch.helpers.Searcher;
-import com.example.instantsearch.helpers.InstantSearch;
+import com.algolia.instantsearch.helpers.Searcher;
+import com.algolia.instantsearch.helpers.InstantSearch;
 
 public class MainActivity extends AppCompatActivity {
     private static final String ALGOLIA_APP_ID = \\"appId\\";
@@ -1387,31 +1407,6 @@ public class MainActivity extends AppCompatActivity {
 }"
 `;
 
-exports[`Templates InstantSearch Android File content: app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java 1`] = `
-"package com.example.instantsearch.app;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-
-import com.example.instantsearch.helpers.Searcher;
-import com.example.instantsearch.helpers.InstantSearch;
-
-public class MainActivity extends AppCompatActivity {
-    private static final String ALGOLIA_APP_ID = \\"latency\\";
-    private static final String ALGOLIA_SEARCH_API_KEY = \\"3d9875e51fbd20c7754e65422f7ce5e1\\";
-    private static final String ALGOLIA_INDEX_NAME = \\"bestbuy\\";
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        setContentView(R.layout.activity_main);
-        final Searcher searcher = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY, ALGOLIA_INDEX_NAME);
-        final InstantSearch helper = new InstantSearch(this, searcher);
-        helper.search(); // First empty search to display default results
-    }
-}"
-`;
-
 exports[`Templates InstantSearch Android File content: app/src/main/res/layout/activity_main.xml 1`] = `
 "<?xml version=\\"1.0\\" encoding=\\"utf-8\\"?>
 <RelativeLayout
@@ -1424,13 +1419,13 @@ exports[`Templates InstantSearch Android File content: app/src/main/res/layout/a
     android:orientation=\\"vertical\\"
     tools:context=\\"com.example.instantsearch.app.MainActivity\\">
 
-    <com.example.instantsearch.ui.views.SearchBox
+    <com.algolia.instantsearch.ui.views.SearchBox
         android:id=\\"@+id/search_box\\"
         android:layout_width=\\"match_parent\\"
         android:layout_height=\\"wrap_content\\"
-        android:layout_marginBottom=\\"10dp\\"/>
+        android:layout_marginBottom=\\"16dp\\"/>
 
-    <com.example.instantsearch.ui.views.Hits
+    <com.algolia.instantsearch.ui.views.Hits
         android:id=\\"@+id/hits\\"
         android:layout_width=\\"match_parent\\"
         android:layout_height=\\"wrap_content\\"
@@ -1441,24 +1436,52 @@ exports[`Templates InstantSearch Android File content: app/src/main/res/layout/a
 
 exports[`Templates InstantSearch Android File content: app/src/main/res/layout/hits_item.xml 1`] = `
 "<?xml version=\\"1.0\\" encoding=\\"utf-8\\"?>
-<layout xmlns:algolia=\\"http://schemas.android.com/apk/res-auto\\"
-        xmlns:android=\\"http://schemas.android.com/apk/res/android\\">
+<layout
+    xmlns:algolia=\\"http://schemas.android.com/apk/res-auto\\"
+    xmlns:android=\\"http://schemas.android.com/apk/res/android\\"
+>
 
     <LinearLayout
         android:layout_width=\\"match_parent\\"
         android:layout_height=\\"wrap_content\\"
-        android:orientation=\\"vertical\\">
+        android:orientation=\\"vertical\\"
+        android:padding=\\"16dp\\"
+    >
 
         <TextView
-            android:id=\\"@+id/mainAttribute\\"
+            android:id=\\"@+id/attribute1\\"
             android:layout_width=\\"wrap_content\\"
             android:layout_height=\\"wrap_content\\"
-            android:layout_marginTop=\\"10dp\\"
-            android:text=\\"mainAttribute\\"
+            android:text=\\"attribute1\\"
             android:textSize=\\"20sp\\"
-            algolia:attribute='@{\\"mainAttribute\\"}'
+            android:textStyle=\\"bold\\"
+            algolia:attribute='@{\\"attribute1\\"}'
             algolia:highlightColor=\\"@color/colorAccent\\"
             algolia:highlighted=\\"@{true}\\"/>
+
+        <TextView
+            android:id=\\"@+id/attribute2\\"
+            android:layout_width=\\"wrap_content\\"
+            android:layout_height=\\"wrap_content\\"
+            android:layout_marginTop=\\"16dp\\"
+            android:text=\\"attribute2\\"
+            android:textSize=\\"20sp\\"
+            algolia:attribute='@{\\"attribute2\\"}'
+            algolia:highlightColor=\\"@color/colorAccent\\"
+            algolia:highlighted=\\"@{true}\\"
+          />
+
+          <TextView
+            android:id=\\"@+id/description\\"
+            android:layout_width=\\"wrap_content\\"
+            android:layout_height=\\"wrap_content\\"
+            android:layout_marginTop=\\"16dp\\"
+            android:text=\\"description\\"
+            android:textSize=\\"20sp\\"
+            algolia:attribute='@{\\"description\\"}'
+            algolia:highlightColor=\\"@color/colorAccent\\"
+            algolia:highlighted=\\"@{true}\\"
+        />
     </LinearLayout>
 </layout>"
 `;
@@ -1813,10 +1836,9 @@ Array [
   "app/.gitignore",
   "app/build.gradle",
   "app/proguard-rules.pro",
-  "app/src/androidTest/java/com/algolia/instantsearch/mvp/ExampleInstrumentedTest.java",
+  "app/src/androidTest/java/com/example/instantsearch/app/ExampleInstrumentedTest.java",
   "app/src/main/AndroidManifest.xml",
-  "app/src/main/java/com/algolia/instantsearch/app/MainActivity.java",
-  "app/src/main/java/com/algolia/instantsearch/mvp/MainActivity.java",
+  "app/src/main/java/com/example/instantsearch/app/MainActivity.java",
   "app/src/main/res/layout/activity_main.xml",
   "app/src/main/res/layout/hits_item.xml",
   "app/src/main/res/mipmap-hdpi/ic_launcher.png",
@@ -2349,8 +2371,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.
         InstantSearch.shared.configure(appID: ALGOLIA_APP_ID, apiKey: ALGOLIA_API_KEY, index: ALGOLIA_INDEX_NAME)
-        InstantSearch.shared.params.attributesToRetrieve = [\\"mainAttribute\\"]
-        InstantSearch.shared.params.attributesToHighlight = [\\"mainAttribute\\"]
+        InstantSearch.shared.params.attributesToRetrieve = [\\"attribute1\\", \\"attribute2\\"]
+        InstantSearch.shared.params.attributesToHighlight = [\\"attribute1\\", \\"attribute2\\"]
 
         return true
     }
@@ -2566,7 +2588,7 @@ class ViewController: HitsTableViewController {
 
         cell.textLabel?.highlightedTextColor = .blue
         cell.textLabel?.highlightedBackgroundColor = .yellow
-        cell.textLabel?.highlightedText = SearchResults.highlightResult(hit: hit, path: \\"name\\")?.value
+        cell.textLabel?.highlightedText = SearchResults.highlightResult(hit: hit, path: \\"attribute1\\")?.value
 
         return cell
     }
@@ -2901,9 +2923,10 @@ search.addWidget(
     container: '#hits',
     templates: {
       item: \`
-        <div>
-          <header>{{{_highlightResult.mainAttribute.value}}}</header>
-        </div>
+        <article>
+          <h1>{{{_highlightResult.attribute1.value}}}</h1>
+          <p>{{{_highlightResult.attribute2.value}}}</p>
+        </article>
       \`,
     },
   })
@@ -3056,6 +3079,8 @@ exports[`Templates JavaScript Client File content: index.html 1`] = `
   <link rel=\\"manifest\\" href=\\"./manifest.webmanifest\\">
   <link rel=\\"shortcut icon\\" href=\\"./favicon.png\\">
 
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css\\">
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch-theme-algolia.min.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
 
@@ -3186,12 +3211,12 @@ exports[`Templates JavaScript Client File content: src/app.css 1`] = `
   display: grid;
   grid-template-columns: 49% 49%;
   grid-gap: 2%;
-  list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .ais-hits--item {
+  list-style: none;
   min-height: 100px;
   padding: 1rem;
   background: #fff;
@@ -3219,11 +3244,19 @@ function renderHits(query) {
   index.search(query).then(result => {
     // Please sanitize user-provided data when using \`innerHTML\` to avoid XSS
     $hits.innerHTML = \`
-      <ul class=\\"ais-hits\\">
+      <ol class=\\"ais-hits\\">
         \${result.hits
-          .map(hit => \`<li class=\\"ais-hits--item\\">\${hit._highlightResult.mainAttribute.value}</li>\`)
+          .map(
+            hit =>
+              \`<li class=\\"ais-hits--item\\">
+                <article>
+                  <h1>\${hit._highlightResult.attribute1.value}</h1>
+                  <p>\${hit._highlightResult.attribute2.value}</p>
+                </article>
+              </li>\`
+          )
           .join('')}
-      </ul>\`;
+      </ol>\`;
   });
 }
 
@@ -3486,13 +3519,12 @@ exports[`Templates JavaScript Helper File content: src/app.css 1`] = `
   display: grid;
   grid-template-columns: 49% 49%;
   grid-gap: 2%;
-  list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .ais-hits--item {
-  min-height: 100px;
+  list-style: none;
   padding: 1rem;
   background: #fff;
   border-radius: 4px;
@@ -3525,11 +3557,19 @@ $searchBox.addEventListener('input', event => {
 helper.on('result', result => {
   // Please sanitize user-provided data when using \`innerHTML\` to avoid XSS
   $hits.innerHTML = \`
-    <ul class=\\"ais-hits\\">
+    <ol class=\\"ais-hits\\">
       \${result.hits
-        .map(hit => \`<li class=\\"ais-hits--item\\">\${hit._highlightResult.mainAttribute.value}</li>\`)
+        .map(
+          hit =>
+            \`<li class=\\"ais-hits--item\\">
+              <article>
+                <h1>\${hit._highlightResult.attribute1.value}</h1>
+                <p>\${hit._highlightResult.attribute2.value}</p>
+              </article>
+            </li>\`
+        )
         .join('')}
-    </ul>\`;
+    </ol>\`;
 });
 
 helper.search();"
@@ -3831,9 +3871,14 @@ class App extends Component {
 
 function Hit(props) {
   return (
-    <div>
-      <Highlight attribute=\\"mainAttribute\\" hit={props.hit} />
-    </div>
+    <article>
+      <h1>
+        <Highlight attribute=\\"attribute1\\" hit={props.hit} />
+      </h1>
+      <p>
+        <Highlight attribute=\\"attribute2\\" hit={props.hit} />
+      </p>
+    </article>
   );
 }
 
@@ -4089,7 +4134,7 @@ export default connectHighlight(Highlight);"
 
 exports[`Templates React InstantSearch Native File content: src/InfiniteHits.js 1`] = `
 "import React from 'react';
-import { StyleSheet, View, FlatList } from 'react-native';
+import { StyleSheet, Text, View, FlatList } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectInfiniteHits } from 'react-instantsearch-native';
 import Highlight from './Highlight';
@@ -4097,11 +4142,14 @@ import Highlight from './Highlight';
 const styles = StyleSheet.create({
   separator: {
     borderBottomWidth: 1,
+    borderColor: '#ddd',
   },
   item: {
     padding: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'column',
+  },
+  titleText: {
+    fontWeight: 'bold',
   },
 });
 
@@ -4113,7 +4161,12 @@ const InfiniteHits = ({ hits, hasMore, refine }) => (
     onEndReached={() => hasMore && refine()}
     renderItem={({ item }) => (
       <View style={styles.item}>
-        <Highlight attribute=\\"mainAttribute\\" hit={item} />
+        <Text style={styles.titleText}>
+          <Highlight attribute=\\"attribute1\\" hit={item} />
+        </Text>
+        <Text>
+          <Highlight attribute=\\"attribute2\\" hit={item} />
+        </Text>
       </View>
     )}
   />
@@ -4136,13 +4189,20 @@ import { connectSearchBox } from 'react-instantsearch-native';
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
-    backgroundColor: '#252b33',
+    padding: 16,
   },
   input: {
-    height: 40,
-    padding: 10,
-    backgroundColor: '#FFFFFF',
+    height: 48,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: '#fff',
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
   },
 });
 
@@ -4357,9 +4417,14 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
 
             <ais-results class=\\"ais-Hits-list\\">
               <template slot-scope=\\"{ result }\\">
-                <div class=\\"ais-Hits-item\\">
-                  <ais-highlight :result=\\"result\\" attribute-name=\\"mainAttribute\\"></ais-highlight>
-                </div>
+                <article class=\\"ais-Hits-item\\">
+                  <h1>
+                    <ais-highlight :result=\\"result\\" attribute-name=\\"attribute1\\"></ais-highlight>
+                  </h1>
+                  <p>
+                    <ais-highlight :result=\\"result\\" attribute-name=\\"attribute2\\"></ais-highlight>
+                  </p>
+                </article>
               </template>
             </ais-results>
 

From f4a1518084cbecbf0338fe20bcaff1a1f890c5b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 27 Jul 2018 16:06:31 +0200
Subject: [PATCH 7/7] fix(template): Remove unused CSS imports

---
 scripts/__snapshots__/e2e-templates.test.js.snap | 2 --
 src/templates/JavaScript Client/index.html.hbs   | 2 --
 2 files changed, 4 deletions(-)

diff --git a/scripts/__snapshots__/e2e-templates.test.js.snap b/scripts/__snapshots__/e2e-templates.test.js.snap
index 6856cf8b7..6ad3d2c41 100644
--- a/scripts/__snapshots__/e2e-templates.test.js.snap
+++ b/scripts/__snapshots__/e2e-templates.test.js.snap
@@ -3079,8 +3079,6 @@ exports[`Templates JavaScript Client File content: index.html 1`] = `
   <link rel=\\"manifest\\" href=\\"./manifest.webmanifest\\">
   <link rel=\\"shortcut icon\\" href=\\"./favicon.png\\">
 
-  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css\\">
-  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch-theme-algolia.min.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
   <link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
 
diff --git a/src/templates/JavaScript Client/index.html.hbs b/src/templates/JavaScript Client/index.html.hbs
index 0d58d3dcf..20feab7c9 100644
--- a/src/templates/JavaScript Client/index.html.hbs	
+++ b/src/templates/JavaScript Client/index.html.hbs	
@@ -9,8 +9,6 @@
   <link rel="manifest" href="./manifest.webmanifest">
   <link rel="shortcut icon" href="./favicon.png">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch-theme-algolia.min.css">
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">