index.svx

<script>
  import Toc from 'svelte-toc'

  import Example from '../components/Example.svelte'
  import GitHubCorner from '../components/GitHubCorner.svelte'

  import SearchIcon from '../lib/SearchIcon.svelte'
  import Docs from '../docs.svx'
</script>

<Toc headingSelector={[...Array(5).keys()].map((i) => `main h${i + 2}`)} --toc-mobile-bg-color="black" --toc-mobile-btn-color="white" --toc-desktop-margin="11em 0 0 0" />

<GitHubCorner href="https://github.com/janosh/svelte-algolia" --ghc-color="var(--body-bg)" --ghc-bg="white" />

<main>

# ![Logo](/favicon.svg) Svelte-Algolia

[![Test Status](https://github.com/janosh/svelte-algolia/workflows/Tests/badge.svg)](https://github.com/janosh/svelte-algolia/actions)
[![NPM version](https://img.shields.io/npm/v/svelte-algolia?color=blue&logo=NPM)](https://npmjs.com/package/svelte-algolia)
[![Netlify Status](https://api.netlify.com/api/v1/badges/496f6094-b6b2-4929-ab16-ba2fdc61d57e/deploy-status)](https://app.netlify.com/sites/svelte-algolia/deploys)

Utility for server-side Algolia index updates plus a client-side search component for Svelte apps. Only adds a single dependency ([`algoliasearch`](https://npmjs.com/package/algoliasearch)) to client and server.

## Live Demo

This is what Svelte-Algolia integrated into a nav bar might look like. Click the <SearchIcon />  icon to try it out!

<Example />

<br />

<Docs />

</main>

<style>
  h1 {
    font-size: calc(1em + 3vw);
  }
  h1 > a {
    display: none;
  }
  h1 img {
    height: 1.2em;
    vertical-align: -10pt;
    padding-right: 4pt;
  }
  /* tells svelte-toc how to highlight clicked headings */
  :global(.toc-clicked) {
    color: cornflowerblue;
  }
</style>