python/sync_with_meilisearch/static/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meilisearch demo</title>

    <script src="https://unpkg.com/meilisearch@0.34.1"></script>
    <script src="https://unpkg.com/alpinejs" defer></script>

    <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink@0" />
    <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons@0" />
  </head>
  <body class="theme-dark">
    <main class="main-content">
      <div class="top-cover u-padding-block-end-56">
        <div class="container">
          <div
            class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
          >
            <h1 class="heading-level-1">Meilisearch demo</h1>
            <code class="u-un-break-text"></code>
          </div>
          <p
            class="body-text-1 u-normal u-margin-block-start-8"
            style="max-width: 50rem"
          >
            Use this demo to verify that the sync between Appwrite Databases and
            Meilisearch was successful. Search your Meilisearch index using the
            input below.
          </p>
        </div>
      </div>
      <div
        class="container u-margin-block-start-negative-56"
        x-data="{ search: '', results: [ ] }"
        x-init="$watch('search', async (value) => { results = await onSearch(value) })"
      >
        <div class="card u-flex u-gap-24 u-flex-vertical">
          <div id="searchbox">
            <div
              class="input-text-wrapper is-with-end-button u-width-full-line"
            >
              <input x-model="search" type="search" placeholder="Search" />
              <div class="icon-search" aria-hidden="true"></div>
            </div>
          </div>
          <div id="hits" class="u-flex u-flex-vertical u-gap-12">
            <template x-for="result in results">
              <div class="card">
                <pre x-text="JSON.stringify(result, null, '\t')"></pre>
              </div>
            </template>
          </div>
        </div>
      </div>
    </main>
    <script>
      const meilisearch = new MeiliSearch({
        host: "{{MEILISEARCH_ENDPOINT}}",
        apiKey: "{{MEILISEARCH_SEARCH_API_KEY}}",
      });

      const index = meilisearch.index("{{MEILISEARCH_INDEX_NAME}}");

      window.onSearch = async function (prompt) {
        return (await index.search(prompt)).hits;
      };
    </script>
  </body>
</html>