Build a Search Interface
Once you've built an index file and uploaded it somewhere accessible (like a CDN or your web host), you'll need to use the Stork Javascript library to load the index and build an interactive search interface.
Step 1: Include the HTML
The Stork Javascript library hooks into HTML that already exists on your page and transforms it into an interactive element. To begin, add the following HTML to your page:
<input data-stork="foo" />
<div data-stork="foo-output"></div>
Stork requires an input element and an output element to attach to. Both those elements need to be tagged with a registration name, which is foo above (though yours can be whatever you'd like). You'll use the registration name later.
Note:
The input element must conform to the selector
input[data-stork="foo"].
The output element must conform to the selector
[data-stork="foo-output"]. The registration name must start with a letter.
Step 2: Load the Javascript
The Stork Javascript library downloads the index file and uses a WebAssembly binary to parse and search through it. Right before the closing </body> tag, load the Stork Javascript library from the Stork CDN:
<script src="https://files.stork-search.net/releases/{version}/stork.js"></script>
If you want more control over where you load external scripts from, you can self-host the Stork Javascript and WebAssembly files. For more information, see Self-hosting Stork.
Step 3: Register your index
The Stork Javascript library exposes a single global variable, stork. After you load the Javascript library, you can add a <script> block where you call the stork.register() function to set Stork up on your web page:
<script>
stork.register("foo", "https://your-url.com/index-file.st");
</script>
The first argument is the registration name that you set in the HTML elements above. The second argument is the URL where you've uploaded the index file that you previously generated.
There is a third, optional argument you can pass to the register() function takes: an options object. The options object exposes client-side configuration settings and a callback API; visit the JS API Reference to learn more.
Step 4: Add a theme
Stork is not perscriptive about the CSS you use to style your search index. The Javascript library does not include any pre-defined styling, and you're free to inspect the DOM and add your own styling, if you wish.
Stork also offers a pre-built stylesheet which can be heavily customized by setting CSS variables. To include the stylesheet, first wrap your input and output elements in a wrapper element and add the following classes to your HTML:
<div class="stork-wrapper">
<input data-stork="foo" class="stork-input" />
<div data-stork="foo-output" class="stork-output"></div>
</div>
Then, add the following within your page's <head>:
<link
rel="stylesheet"
href="https://files.stork-search.net/releases/${version}/stork.css"
/>
You can use the interactive theme creator to explore the CSS variables exposed by the stylesheet.