index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="./manifest.webmanifest" />
    <link rel="shortcut icon" href="./favicon.png" />

    <link rel="stylesheet" href="./src/index.scss" />

    <title>Search Books from OpenLibrary with Typesense</title>
    <meta name="description" content="Books Search with Typesense" />
    <meta
      name="keywords"
      content="books, search, books search, search engine, typesense, typesense showcase, typesense demo, open library, internet archive"
    />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://books-search.typesense.org" />
    <meta
      property="og:title"
      content="Instantly Search OpenLibrary Books with Typesense"
    />
    <meta
      name="og:description"
      content="Search through 28M books from the OpenLibrary database (from Internet Archive) with Typesense"
    />
    <meta property="og:image" content="./images/opengraph_banner.png" />

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-116415641-6"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag() {
        dataLayer.push(arguments);
      }

      gtag("js", new Date());

      gtag("config", "UA-116415641-6");
    </script>
  </head>

  <body class="container-fluid">
    <div class="container-fluid">
      <div class="row mt-3">
        <div class="col-md">
          <header>
            <div class="row">
              <div class="col-md">
                <h1 class="text-md-center font-serif">
                  Instantly Search <br class="d-md-none" />
                  28 Million Books 📚
                </h1>
                <h5 class="text-md-center mt-3 fw-light">
                  <div class="d-md-inline d-block mt-3">
                    <span style="vertical-align: text-bottom">powered by</span>
                    <a href="https://typesense.org" target="_blank">
                      <img
                        src="images/typesense.svg"
                        height="28"
                        alt="Typesense"
                        class="mx-2"
                        style="
                          vertical-align: top;
                          position: relative;
                          top: -4px;
                        "
                      />
                    </a>
                  </div>
                </h5>
                <div class="d-md-flex justify-content-md-center">
                  <ul class="nav">
                    <li class="nav-item">
                      <a
                        class="ps-0 nav-link"
                        href="https://github.com/typesense/showcase-books-search"
                        target="_blank"
                        >Github</a
                      >
                    </li>
                    <li class="nav-item">
                      <a
                        class="nav-link"
                        aria-roledescription="button"
                        data-bs-toggle="modal"
                        data-bs-target="#aboutModal"
                        href="#"
                      >
                        <span>About</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </header>
        </div>
      </div>
    </div>

    <div class="row mt-2 mt-md-3 no-gutters">
      <div class="col-md p-0">
        <div
          id="searchbox-container"
          class="bg-secondary pt-3 pt-md-5 pb-2 pb-md-4 px-3 px-md-5"
        >
          <div class="row justify-content-md-center">
            <div class="col-md-8">
              <div id="searchbox"></div>
              <div class="mt-2">
                Try:
                <span id="example-search-terms">
                  <a role="button" class="clickable-search-term"
                    >Dale Carnegie</a
                  >,
                  <a role="button" class="clickable-search-term">Shoe Dog</a>,
                  <a role="button" class="clickable-search-term">Devops</a>,
                  <a role="button" class="clickable-search-term"
                    >Phoenix project</a
                  >,
                  <a role="button" class="clickable-search-term"
                    >Extreme Ownership</a
                  >,
                  <a role="button" class="clickable-search-term">Mark Twain</a>,
                  <a role="button" class="clickable-search-term"
                    >John Grisham</a
                  >
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="results-section" class="container d-none">
      <div class="row mt-3">
        <div class="col-md-3"></div>
        <div class="col-md">
          <div class="row d-flex justify-content-end">
            <div id="sort-by" class="col-5 col-md-2 mt-2 mt-md-0"></div>
            <div
              id="stats"
              class="col-md ms-md-2 text-right small order-first order-md-last d-flex align-items-center justify-content-end justify-content-md-start px-md-0"
            ></div>
          </div>
        </div>
      </div>

      <div class="row mt-3">
        <div class="col-md-3">
          <nav class="navbar navbar-expand-md navbar-light p-0 pb-3">
            <button
              class="navbar-toggler text-primary border-light-2"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#filters-section"
              aria-controls="filters-section"
              aria-expanded="false"
              aria-label="Toggle filters"
            >
              <span class="navbar-toggler-icon"></span
              ><span class="ms-2" style="font-size: 15px">Refine</span>
            </button>

            <div
              class="collapse navbar-collapse d-md-block mt-3 mt-md-0"
              id="filters-section"
            >
              <div class="row mb-2">
                <div class="col-md">
                  <div id="current-refinements"></div>
                </div>
              </div>

              <div class="row mt-2">
                <div class="col-md">
                  <h4 class="fw-light text-primary">Filter by Subject</h4>
                  <div id="subjects-refinement-list"></div>
                </div>
              </div>

              <div class="row mt-5">
                <div class="col-md">
                  <h4 class="fw-light text-primary">Filter by Authors</h4>
                  <div id="author-refinement-list"></div>
                </div>
              </div>
            </div>
          </nav>
        </div>
        <div class="col-md">
          <div id="hits"></div>
        </div>
      </div>
    </div>

    <footer class="navbar fixed-bottom py-0">
      <div
        class="container-fluid justify-content-center justify-content-md-end"
      >
        <span class="navbar-text">
          <a
            href="#"
            aria-roledescription="button"
            data-bs-toggle="modal"
            data-bs-target="#aboutModal"
          >
            <span>about</span>
          </a>
        </span>
      </div>
    </footer>

    <!-- About Modal -->
    <div
      id="aboutModal"
      class="modal fade"
      tabindex="-1"
      aria-labelledby="aboutLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title font-weight-normal" id="aboutLabel">
              About
            </h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <p>
              This search experience is powered by
              <a href="https://typesense.org" target="_blank">Typesense</a>
              which is a blazing-fast,
              <a href="https://github.com/typesense/typesense" target="_blank"
                >open source</a
              >
              typo-tolerant search-engine. It is an open source alternative to
              Algolia and an easier-to-use alternative to ElasticSearch.
            </p>
            <p>
              The books dataset is from
              <a href="https://openlibrary.org" target="_blank">Open Library</a>
              which is an initiative of the Internet Archive. Please contribute
              books metadata if you're able to.
            </p>
            <p>
              The app was built using the
              <a
                href="https://github.com/typesense/typesense-instantsearch-adapter"
                target="_blank"
              >
                Typesense Adapter for InstantSearch.js</a
              >
              and is hosted on S3, with Cloudfront for a CDN.
            </p>
            <p>
              The search backend is powered by a geo-distributed 3-node
              Typesense cluster running on
              <a href="https://cloud.typesense.org" target="_blank"
                >Typesense Cloud</a
              >, with nodes in Oregon, Frankfurt and Mumbai.
            </p>
            <p>
              Here is the source-code that shows you how to build your own
              search experience like this one:
              <a
                href="https://github.com/typesense/showcase-books-search"
                target="_blank"
                >https://github.com/typesense/showcase-books-search</a
              >
            </p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-primary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="./src/app.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>