Add search box to tutorials page about sites HOT 4 OPEN

One solution could be to use Flexsearch, which is open source.

We could generate the index at build time, and perform searches client-side.

To generate the index:

// create the index
const index = FlexSearch.create(...opts...)

// iterate thru markdown files and add items to index
// example:
index.add({path: '/docs#if', title: "#if", content: '...'})
index.add({path: '/docs#each', title: "#each", content: '...'})

// export the index to disc in a public location
fs.writeFileSync("__sapper__/build/search-index.json", index.export())

Then on client side, the index would be imported:

const index = FlexSearch.create()
const response = await fetch('/search-index.json')

index.import(await response.json())

And a search would be performed using the imported index:

<!-- SearchBox.svelte -->
<script>
let query
$: results = index.search({query, limit: 5})
</script>

<input bind:value={query}/>
<ul>
  {#each results as document}
     <li><a href={document.path}>{document.title}</a></li>
  {/each}
</ul>

Advantages of this approach:

• Uses an open source solution
• The search is performed client side / no server side component is needed
• The search index is downloaded on-demand / no performance cost for those not using it
• The search index is cached for multiple searches

from sites.

This has come up before in sveltejs/svelte#2757, which is written from the perspective of using one particular third-party service.

from sites.

Is there still interest in this task? The PR at sveltejs/svelte#4161 does about a good a job as is possible without a service like Algolia (simply filtering by section titles fetched from the docs endpoint). Algolia (or similar) would likely be required if we'd like to index examples, tutorials, and blog posts.

from sites.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from sites.