Merge #729

meili-bors[bot] · bidoubiwa · web-flow · commit 284be6555a23 · 2022-04-07T14:17:46.000Z
729: Add code sample for landing page r=bidoubiwa a=bidoubiwa fixes: #728 The code-sample required to paste code in two different files. Alternatively we can use the following HTML code which requires only one copy paste in an HTML file. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <div> <div id="searchbox"></div> <div id="hits"></div> </div> <script src="https://cdn.jsdelivr.net/npm/`@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>` <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script> const search = instantsearch({ indexName: 'video', searchClient: instantMeiliSearch( "http://localhost:7700", "searchKey" ), }) search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), 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> ``` Co-authored-by: Charlotte Vermandel <charlottevermandel@gmail.com>
diff --git a/.code-samples.meilisearch.yaml b/.code-samples.meilisearch.yaml
@@ -0,0 +1,38 @@
+landing_getting_started_1: |-
+  <body>
+    <div>
+      <div id="searchbox"></div>
+      <div id="hits"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
+    <script>
+      const search = instantsearch({
+        indexName: 'movies',
+        searchClient: instantMeiliSearch(
+          'http://localhost:7700',
+          'searchKey'
+        ),
+      })
+
+      search.addWidgets([
+        instantsearch.widgets.searchBox({
+          container: '#searchbox',
+        }),
+        instantsearch.widgets.hits({
+          container: '#hits',
+          templates: {
+            item: `
+              <div>
+                <div class="hit-name">
+                  {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
+                </div>
+              </div>
+            `,
+          },
+        }),
+      ])
+      search.start()
+    </script>
+  </body>
