Pagefind for search

[corneliusroemer]

Docs and governance pages are hard to find (there are more than 30 or so in Pathoplexus).

We could use Pagefind to implement a site-wide search, as discussed in pathoplexus/pathoplexus#244

I looked into this briefly:

• We can't use the astro-pagefind plugin because we use server side rendering.
• Instead, we can scrape pages with, for instance, wget to create a folder tree with render html pages. E.g.:

  npm run start-server &
  wget --mirror \
       --convert-links \
       --adjust-extension \
       --no-parent \
       --reject "*.js,*.css,*.png,*.jpg,*.jpeg,*.gif,*.ico,*.svg,*.woff,*.woff2,*.ttf" \
       --exclude-directories="/seq" \
       --directory-prefix=./static \
       localhost:3000
  

• We then run npx pagefind --site static/localhost:3000
• And move the resulting output into the public folder: mv static/localhost:3000/pagefind public/pagefind
• We can then add search in the header component of every page by:
  • including this in the html header:

    <link href='/pagefind/pagefind-ui.css' rel='stylesheet' />
    <script src='/pagefind/pagefind-ui.js' is:inline></script>

  • Adding a search div somewhere in the header nav html:

    <div id='search' class='px-4'></div>

  • Initializing the search somewhere:

    <script is:inline>
        window.addEventListener('DOMContentLoaded', (event) => {
            new PagefindUI({
                element: '#search',
                showSubResults: true,
            });
        });
    </script>

• Here's an (ugly) proof-of-concept:
  
• This workaround might be necessary: CLI adds .html suffix to target paths in the generated index, causing 404 errors in the Pagefind UI CloudCannon/pagefind#732 (comment)
• It's probably nicer to show search results in a modal, this is how Starlight (Astro docs) does it: https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro

[corneliusroemer]

We could also use Algolia, might be slightly more feature packed, has free plan and if we need more we should qualify for open source: https://www.algolia.com/for-open-source/

[theosanderson]

I don't think we should incorporate something into Loculus that requires filling out a form to apply(?)