Add code sample for landing page

bidoubiwa · bidoubiwa · commit ef2a65c5441c · 2022-04-06T17:44:48.000+02:00
diff --git a/.code-samples.meilisearch.yaml b/.code-samples.meilisearch.yaml
@@ -0,0 +1,47 @@
+landing_getting_started_1: |-
+  // in app.js
+  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()
+
+  // in index.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 src="./app.js"></script>
+    </body>
+  </html>
