Full text search

[Rich-Harris]

Step 6 of #3696.

Preview deployment: https://kit-svelte-dev-git-flexsearch-svelte.vercel.app/

WIP. Adds a search bar powered by https://github.com/nextapps-de/flexsearch. Needs lots of design work and debugging (and @geoffrich, if you get a chance, I'd be very grateful for any a11y pointers), but as a proof of concept it does the trick.

Once it's in better shape, we can move to multi-page docs (and move migrating/FAQ into the docs — they don't need to be separate links, I don't think).

One known issue: I haven't figured out how to make a 'clean' marked instance — once marked.use(...) gets called, the options are used everywhere, which means that the plaintext stuff in this PR affects the generation of the docs themselves (which should only affect local development, but is annoying nonetheless).

• improve search (make the headings themselves searchable, not just the content that belongs to them)
• improve design (group items?)
• ensure a11y is up to snuff
• move to a multi-page setup
• update all the internal docs links
• fix links to FAQ
• fix FAQ CSS
• fix bug that happens when you bring up the search box with Cmd-K while the page is scrolled — if nav bar isn't visible, it flashes in awkwardly
• fix markdown transformation after content.json has been generated
• ensure it works well on mobile
• see if we can get away with keeping all this stuff on the main thread, or if we need to faff about with workers
• while waiting for a query, list recent searches (powered by localStorage) with delete buttons, or show a 'no recent searches' message
• (eventually) extract this stuff out so that it's usable by other sites, e.g. svelte.dev (which might also include tutorials and blog posts etc)
• fade search bar in on hydration, since it's not present at SSR time
• replace ⌘K with the windows equivalent when appropriate, hide on mobile
• include faqs/migration
• continue to show links in mobile nav
• fix scrollbar bug (dragging the scrollbar kills the modal)
• contrast in search box Full text search #3717 (comment)
• check things are in the right place in safari Full text search #3717 (comment)
• fix nav overlapping Full text search #3717 (comment)

Tasks specific to multi-page redesign:

• next/prev links
• only load TOC in layout, not the content itself
• use shadow endpoint for content (there's a bug that needs fixing first — the data isn't refetched when the URL changes)
• remove contents menu on mobile in favour of a) search and b) links in footer

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

⚠️ No Changeset found

Latest commit: fdbd9d5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✔️ Deploy Preview for kit-demo canceled.

🔨 Explore the source changes: c315589

🔍 Inspect the deploy log: https://app.netlify.com/sites/kit-demo/deploys/62040293f2beaf0007d66fab

[Rich-Harris]

the deploy is working now, i fooked up the prerendering

[Rich-Harris]

Not sure if this is an issue with the implementation or with SvelteKit.

It's a bug in Kit itself — opened #3770

[ghostdevv]

Am wondering how integrating with this off-site will work. Currently the api is used by the svelte discord bot to add search functionality inside of the discord. Will the bot be able to use the kit endpoints or need to implement it's own scraping and parsing of the data whether that's from repo or site

[Rich-Harris]

@ghostdevv at present the content that powers the search box is available at /content.json. The table of doc contents is at /docs.json, and individual sections (with content) are at /docs/introduction.json etc. The bot might need some rejiggering but I think everything it needs should be available.

Having said that those URLs might change if this switches over to use shadow endpoints — /docs/introduction/__data.json etc.

[ghostdevv]

@Rich-Harris thanks! We can work with that for sure