Skip to content

Add code sample for landing page #729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Apr 7, 2022
Merged

Add code sample for landing page #729

merged 3 commits into from
Apr 7, 2022

Conversation

@bidoubiwa
Copy link
Contributor

@bidoubiwa bidoubiwa commented Apr 6, 2022

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.

<!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>

brunoocasali
brunoocasali previously approved these changes Apr 6, 2022
View reviewed changes
Copy link
Member

@brunoocasali brunoocasali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think both options are suitable for this case @bidoubiwa the one file/multiple files.

Feel free to choose (or check with @mdubus).

But if you chose the one file option, you will need to update the index name :)

@bidoubiwa bidoubiwa requested a review from mdubus April 7, 2022 13:29
mdubus
mdubus reviewed Apr 7, 2022
View reviewed changes
Copy link
Member

@mdubus mdubus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would have left the body tag in order to visualize where to put this code :)

@bidoubiwa bidoubiwa requested a review from mdubus April 7, 2022 13:40
mdubus
mdubus approved these changes Apr 7, 2022
View reviewed changes
Copy link
Member

@mdubus mdubus left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🔥

@bidoubiwa
Copy link
Contributor Author

bidoubiwa commented Apr 7, 2022

bors merge

@meili-bors
Copy link
Contributor

meili-bors bot commented Apr 7, 2022

Build succeeded:

@meili-bors meili-bors bot merged commit 284be65 into main Apr 7, 2022
@meili-bors meili-bors bot deleted the add_code_samples branch April 7, 2022 14:20
@bidoubiwa bidoubiwa added the skip-changelog The PR will not appear in the release changelogs label Apr 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mdubus mdubus mdubus approved these changes

@brunoocasali brunoocasali brunoocasali left review comments

@alallema alallema Awaiting requested review from alallema

Assignees

No one assigned

Labels

skip-changelog The PR will not appear in the release changelogs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Update .code-samples.meilisearch.yaml

4 participants

@bidoubiwa @brunoocasali @mdubus