Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Full text search #3717

Merged
merged 76 commits into from
Feb 9, 2022
Merged
Show file tree
Hide file tree
Changes from 72 commits
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
94fee0f
flexsearch
Rich-Harris Feb 4, 2022
71fd627
tweak UI
Rich-Harris Feb 4, 2022
99412ea
tweak
Rich-Harris Feb 4, 2022
eda410c
Update sites/kit.svelte.dev/src/lib/search/Search.svelte
Rich-Harris Feb 4, 2022
9af96b2
Update sites/kit.svelte.dev/src/lib/search/Search.svelte
Rich-Harris Feb 4, 2022
43035c8
work around marked global state sharing
Rich-Harris Feb 4, 2022
26fcf8c
Merge branch 'flexsearch' of github.com:sveltejs/kit into flexsearch
Rich-Harris Feb 4, 2022
7380a71
include migrating/faqs
Rich-Harris Feb 4, 2022
b06ccc8
fade in search bar
Rich-Harris Feb 4, 2022
894a02b
prevent blocking
Rich-Harris Feb 4, 2022
f4e3dd2
remove commented out nav items
Rich-Harris Feb 4, 2022
b8a2fcf
ui tweaks
Rich-Harris Feb 4, 2022
a78c97d
close search box on tapping modal background
Rich-Harris Feb 4, 2022
df94a96
update site-kit
Rich-Harris Feb 4, 2022
f217100
tweak style
Rich-Harris Feb 4, 2022
5b9d019
fix position:fixed css glitch by separating components
Rich-Harris Feb 4, 2022
a47fcd2
fix mobile sizing
Rich-Harris Feb 4, 2022
3ce2ac1
tidy up
Rich-Harris Feb 4, 2022
8f67e87
close on backspace
Rich-Harris Feb 4, 2022
9e194fd
close with backspace
Rich-Harris Feb 4, 2022
9cb181c
add search icon, show ctrl-key on windows
Rich-Harris Feb 4, 2022
6637f80
use ctrl key on windows
Rich-Harris Feb 4, 2022
9c303f5
reinstate links
Rich-Harris Feb 4, 2022
9ad78c4
configure typescript
Rich-Harris Feb 5, 2022
c11690d
rudimentary recent searches
Rich-Harris Feb 5, 2022
69bc586
various fixes
Rich-Harris Feb 5, 2022
27bfcc4
add close button
Rich-Harris Feb 5, 2022
5980cb9
distinguish between tab and arrow key
Rich-Harris Feb 5, 2022
b72da82
explanation
Rich-Harris Feb 5, 2022
15834e9
add delete button
Rich-Harris Feb 5, 2022
1bc6db6
remove unused handler
Rich-Harris Feb 5, 2022
f28a4f6
tweak faq page
Rich-Harris Feb 5, 2022
92f1f3c
oops
Rich-Harris Feb 5, 2022
af4c8da
fix FAQ links
Rich-Harris Feb 5, 2022
847a396
fix links
Rich-Harris Feb 5, 2022
1ab4c09
select first result on enter
Rich-Harris Feb 5, 2022
b6121be
multi-page docs
Rich-Harris Feb 7, 2022
c84da40
Update sites/kit.svelte.dev/src/lib/search/Search.svelte
Rich-Harris Feb 7, 2022
c507bc8
Update sites/kit.svelte.dev/src/lib/search/Search.svelte
Rich-Harris Feb 7, 2022
2a3f12c
Update sites/kit.svelte.dev/src/routes/__layout.svelte
Rich-Harris Feb 7, 2022
64270f1
Update sites/kit.svelte.dev/src/lib/search/Search.svelte
Rich-Harris Feb 7, 2022
cd1747c
explain why we prevent default on spacebar press
Rich-Harris Feb 7, 2022
64f1e39
Merge branch 'flexsearch' of github.com:sveltejs/kit into flexsearch
Rich-Harris Feb 7, 2022
22018d1
move delete button out of <a>
Rich-Harris Feb 7, 2022
f4bc81e
wrap <Search> in <li>
Rich-Harris Feb 7, 2022
71dee8e
move <SearchBox> inside <main>
Rich-Harris Feb 7, 2022
94a412b
use position:fixed on body to prevent scroll while modal is open
Rich-Harris Feb 7, 2022
f036874
hopefully fix safari layout
Rich-Harris Feb 7, 2022
2ac33f1
use label instead of aria-label
Rich-Harris Feb 7, 2022
82fa4b4
use a heading instead of an li
Rich-Harris Feb 7, 2022
11618c7
prerender TOC data
Rich-Harris Feb 7, 2022
50172e2
err hmmm
Rich-Harris Feb 7, 2022
9f0cdd8
fix some contrast ratios, add aria-describedby to input
Rich-Harris Feb 7, 2022
a99a2d3
fix prerendering
Rich-Harris Feb 7, 2022
672ab51
make edit link clickable
Rich-Harris Feb 7, 2022
40c2026
add aria-live region for no results
Rich-Harris Feb 7, 2022
e2c36aa
focus body when closing modal
Rich-Harris Feb 7, 2022
5cb0d43
fix search result links
Rich-Harris Feb 8, 2022
a2677d8
update tsconfig
Rich-Harris Feb 8, 2022
a9e4205
prevent nav links overlapping with search bar
Rich-Harris Feb 8, 2022
b8ee5ca
slim down responses
Rich-Harris Feb 8, 2022
c37bddc
add prev/next links
Rich-Harris Feb 8, 2022
2080e20
show contents as footer on mobile
Rich-Harris Feb 8, 2022
8205615
fold migrating into main docs
Rich-Harris Feb 9, 2022
e210326
merge master
Rich-Harris Feb 9, 2022
4916944
fix build-blocking bugs
Rich-Harris Feb 9, 2022
4749494
/docs/sections.json -> /docs.json
Rich-Harris Feb 9, 2022
4b697af
update config
Rich-Harris Feb 9, 2022
cda29b3
remove unused file (merge conflict)
Rich-Harris Feb 9, 2022
1920788
update docs
Rich-Harris Feb 9, 2022
84d9b2a
update internal links
Rich-Harris Feb 9, 2022
072818e
fix links
Rich-Harris Feb 9, 2022
635ae95
fix gradient overlay
Rich-Harris Feb 9, 2022
666c155
Merge branch 'master' into flexsearch
Rich-Harris Feb 9, 2022
c315589
update lockfile
Rich-Harris Feb 9, 2022
fdbd9d5
give default template a name, for sake of cloudflare deployment
Rich-Harris Feb 9, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions documentation/docs/00-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ title: Introduction

> SvelteKit is in early development, and some things may change before we hit version 1.0. This document is a work-in-progress. If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
>
> See the [migration guides](/migrating) for help upgrading from Sapper.
> See the [migration guides](/docs/migrating) for help upgrading from Sapper.

### What is SvelteKit?

SvelteKit is a framework for building extremely high-performance web apps.

Building an app with all the modern best practices is fiendishly complicated. Those practices include [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations), so that you load only the minimal required code; [offline support](#service-workers); [prefetching](#anchor-options-sveltekit-prefetch) pages before the user initiates navigation; and [configurable rendering](#page-options) that allows you to generate HTML [on the server](#appendix-ssr) or [in the browser](#page-options-router) at runtime or [at build-time](#page-options-prerender). SvelteKit does all the boring stuff for you so that you can get on with the creative part.
Building an app with all the modern best practices is fiendishly complicated. Those practices include [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations), so that you load only the minimal required code; [offline support](/docs/service-workers); [prefetching](/docs/a-options#sveltekit-prefetch) pages before the user initiates navigation; and [configurable rendering](/docs/page-options) that allows you to generate HTML [on the server](/docs/appendix#ssr) or [in the browser](/docs/page-options#router) at runtime or [at build-time](/docs/page-options#prerender). SvelteKit does all the boring stuff for you so that you can get on with the creative part.

It uses [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to provide a lightning-fast and feature-rich development experience with [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot), where changes to your code are reflected in the browser instantly.

Expand Down
18 changes: 9 additions & 9 deletions documentation/docs/01-routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: Routing

At the heart of SvelteKit is a _filesystem-based router_. This means that the structure of your application is defined by the structure of your codebase — specifically, the contents of `src/routes`.

> You can change this to a different directory by editing the [project config](#configuration).
> You can change this to a different directory by editing the [project config](/docs/configuration).

There are two types of route — **pages** and **endpoints**.

Pages typically generate HTML to display to the user (as well as any CSS and JavaScript needed for the page). By default, pages are rendered on both the client and server, though this behaviour is configurable.

Endpoints run only on the server (or when you build your site, if [prerendering](#page-options-prerender)). This means it's the place to do things like access databases or APIs that require private credentials or return data that lives on a machine in your production network. Pages can request data from endpoints. Endpoints return JSON by default, though may also return data in other formats.
Endpoints run only on the server (or when you build your site, if [prerendering](/docs/page-options#prerender)). This means it's the place to do things like access databases or APIs that require private credentials or return data that lives on a machine in your production network. Pages can request data from endpoints. Endpoints return JSON by default, though may also return data in other formats.

### Pages

Pages are Svelte components written in `.svelte` files (or any file with an extension listed in [`config.extensions`](#configuration)). By default, when a user first visits the application, they will be served a server-rendered version of the page in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel where the common portions in the layout do not need to be rerendered.
Pages are Svelte components written in `.svelte` files (or any file with an extension listed in [`config.extensions`](/docs/configuration)). By default, when a user first visits the application, they will be served a server-rendered version of the page in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel where the common portions in the layout do not need to be rerendered.

The filename determines the route. For example, `src/routes/index.svelte` is the root of your site:

Expand Down Expand Up @@ -78,7 +78,7 @@ interface Fallthrough {
}
```

> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.

A page like `src/routes/items/[id].svelte` could get its data from `src/routes/items/[id].js`:

Expand All @@ -102,7 +102,7 @@ export async function get({ params }) {
}
```

> All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. Don't worry about the `$lib` import, we'll get to that [later](#modules-$lib).
> All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. Don't worry about the `$lib` import, we'll get to that [later](/docs/modules#$lib).

The job of this function is to return a `{ status, headers, body }` object representing the response, where `status` is an [HTTP status code](https://httpstatusdogs.com):

Expand All @@ -111,7 +111,7 @@ The job of this function is to return a `{ status, headers, body }` object repre
- `4xx` — client error
- `5xx` — server error

> If `{fallthrough: true}` is returned SvelteKit will [fall through](#routing-advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
> If `{fallthrough: true}` is returned SvelteKit will [fall through](/docs/routing#advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.

The returned `body` corresponds to the page's props:

Expand Down Expand Up @@ -223,7 +223,7 @@ return {

#### HTTP method overrides

HTML `<form>` elements only support `GET` and `POST` methods natively. You can allow other methods, like `PUT` and `DELETE`, by specifying them in your [configuration](#configuration-methodoverride) and adding a `_method=VERB` parameter (you can configure the name) to the form's `action`:
HTML `<form>` elements only support `GET` and `POST` methods natively. You can allow other methods, like `PUT` and `DELETE`, by specifying them in your [configuration](/docs/configuration#methodoverride) and adding a `_method=VERB` parameter (you can configure the name) to the form's `action`:

```js
// svelte.config.js
Expand Down Expand Up @@ -252,7 +252,7 @@ Most commonly, endpoints exist to provide data to the page with which they're pa

### Private modules

Files and directories with a leading `_` or `.` (other than [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI)) are private by default, meaning that they do not create routes (but can be imported by files that do). You can configure which modules are considered public or private with the [`routes`](#configuration-routes) configuration.
Files and directories with a leading `_` or `.` (other than [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI)) are private by default, meaning that they do not create routes (but can be imported by files that do). You can configure which modules are considered public or private with the [`routes`](/docs/configuration#routes) configuration.

### Advanced routing

Expand Down Expand Up @@ -288,6 +288,6 @@ src/routes/[qux].svelte
src/routes/foo-[bar].svelte
```

... and you navigate to `/foo-xyz`, then SvelteKit will first try `foo-[bar].svelte` because it is the best match. If that yields no response, SvelteKit will try other less specific yet still valid matches for `/foo-xyz`. Since endpoints have higher precedence than pages, the next attempt will be `[baz].js`. Then alphabetical order takes precedence and thus `[baz].svelte` will be tried before `[qux].svelte`. The first route that responds — a page that returns something from [`load`](#loading) or has no `load` function, or an endpoint that returns something — will handle the request.
... and you navigate to `/foo-xyz`, then SvelteKit will first try `foo-[bar].svelte` because it is the best match. If that yields no response, SvelteKit will try other less specific yet still valid matches for `/foo-xyz`. Since endpoints have higher precedence than pages, the next attempt will be `[baz].js`. Then alphabetical order takes precedence and thus `[baz].svelte` will be tried before `[qux].svelte`. The first route that responds — a page that returns something from [`load`](/docs/loading) or has no `load` function, or an endpoint that returns something — will handle the request.

If no page or endpoint responds to a request, SvelteKit will respond with a generic 404.
6 changes: 3 additions & 3 deletions documentation/docs/02-layouts.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Layout resets are otherwise identical to normal layout components.

### Error pages

If a page fails to load (see [Loading](#loading)), SvelteKit will render an error page. You can customise this page by creating `__error.svelte` components alongside your layout and page components.
If a page fails to load (see [Loading](/docs/loading)), SvelteKit will render an error page. You can customise this page by creating `__error.svelte` components alongside your layout and page components.

For example, if `src/routes/settings/notifications/index.svelte` failed to load, SvelteKit would render `src/routes/settings/notifications/__error.svelte` in the same layout, if it existed. If not, it would render `src/routes/settings/__error.svelte` in the parent layout, or `src/routes/__error.svelte` in the root layout.

Expand All @@ -87,7 +87,7 @@ export interface ErrorLoadInput<Params extends Record<string, string> = Record<s
}
```

If an error component has a [`load`](#loading) function, it will be called with `error` and `status` properties:
If an error component has a [`load`](/docs/loading) function, it will be called with `error` and `status` properties:

```html
<script context="module">
Expand All @@ -108,6 +108,6 @@ If an error component has a [`load`](#loading) function, it will be called with
<h1>{title}</h1>
```

> Layout components also have access to `error` and `status` via the [page store](#modules-$app-stores)
> Layout components also have access to `error` and `status` via the [page store](/docs/modules#$app-stores)
>
> Server-side stack traces will be removed from `error` in production, to avoid exposing privileged information to users.
14 changes: 7 additions & 7 deletions documentation/docs/03-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface Fallthrough {
}
```

> See the [TypeScript](#typescript) section for information on `App.Session` and `App.Stuff`.
> See the [TypeScript](/docs/typescript) section for information on `App.Session` and `App.Stuff`.

A page that loads data from an external API might look like this:

Expand All @@ -64,19 +64,19 @@ A page that loads data from an external API might look like this:

`load` is similar to `getStaticProps` or `getServerSideProps` in Next.js, except that it runs on both the server and the client. In the example above, if a user clicks on a link to this page the data will be fetched from `cms.example.com` without going via our server.

If `load` returns `{fallthrough: true}`, SvelteKit will [fall through](#routing-advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
If `load` returns `{fallthrough: true}`, SvelteKit will [fall through](/docs/routing#advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.

SvelteKit's `load` receives an implementation of `fetch`, which has the following special properties:

- it has access to cookies on the server
- it can make requests against the app's own endpoints without issuing an HTTP call
- it makes a copy of the response when you use it, and then sends it embedded in the initial page load for hydration

`load` only applies to [page](#routing-pages) and [layout](#layouts) components (not components they import), and runs on both the server and in the browser with the default rendering options.
`load` only applies to [page](/docs/routing#pages) and [layout](/docs/layouts) components (not components they import), and runs on both the server and in the browser with the default rendering options.

> Code called inside `load` blocks:
>
> - should use the SvelteKit-provided [`fetch`](#loading-input-fetch) wrapper rather than using the native `fetch`
> - should use the SvelteKit-provided [`fetch`](/docs/loading#input-fetch) wrapper rather than using the native `fetch`
> - should not reference `window`, `document`, or any browser-specific objects
> - should not directly reference any API keys or secrets, which will be exposed to the client, but instead call an endpoint that uses any required secrets

Expand All @@ -94,7 +94,7 @@ The `load` function receives an object containing six fields — `url`, `params`

`url` is an instance of [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), containing properties like the `origin`, `hostname`, `pathname` and `searchParams`.

> In some environments this is derived from request headers, which you [may need to configure](#configuration-headers), during server-side rendering
> In some environments this is derived from request headers during server-side rendering. If you're using [adapter-node]/docs/adapters#supported-environments-node-js, for example, you may need to configure the adapter in order for the URL to be correct.

#### params

Expand Down Expand Up @@ -123,7 +123,7 @@ If the page you're loading has an endpoint, the data returned from it is accessi

#### session

`session` can be used to pass data from the server related to the current request, e.g. the current user. By default it is `undefined`. See [`getSession`](#hooks-getsession) to learn how to use it.
`session` can be used to pass data from the server related to the current request, e.g. the current user. By default it is `undefined`. See [`getSession`](/docs/hooks#getsession) to learn how to use it.

#### stuff

Expand Down Expand Up @@ -161,4 +161,4 @@ If the `load` function returns a `props` object, the props will be passed to the

This will be merged with any existing `stuff` and passed to the `load` functions of subsequent layout and page components.

The combined `stuff` is available to components using the [page store](#modules-$app-stores) as `$page.stuff`, providing a mechanism for pages to pass data 'upward' to layouts.
The combined `stuff` is available to components using the [page store](/docs/modules#$app-stores) as `$page.stuff`, providing a mechanism for pages to pass data 'upward' to layouts.
12 changes: 6 additions & 6 deletions documentation/docs/04-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ title: Hooks

An optional `src/hooks.js` (or `src/hooks.ts`, or `src/hooks/index.js`) file exports four functions, all optional, that run on the server — **handle**, **handleError**, **getSession**, and **externalFetch**.

> The location of this file can be [configured](#configuration) as `config.kit.files.hooks`
> The location of this file can be [configured](/docs/configuration) as `config.kit.files.hooks`

### handle

This function runs every time SvelteKit receives a request — whether that happens while the app is running, or during [prerendering](#page-options-prerender) — and determines the response. It receives an `event` object representing the request and a function called `resolve`, which invokes SvelteKit's router and generates a response (rendering a page, or invoking an endpoint) accordingly. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing endpoints programmatically, for example).
This function runs every time SvelteKit receives a request — whether that happens while the app is running, or during [prerendering](/docs/page-options#prerender) — and determines the response. It receives an `event` object representing the request and a function called `resolve`, which invokes SvelteKit's router and generates a response (rendering a page, or invoking an endpoint) accordingly. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing endpoints programmatically, for example).

> Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.

Expand Down Expand Up @@ -38,7 +38,7 @@ export interface Handle {
}
```

> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.

To add custom data to the request, which is passed to endpoints, populate the `event.locals` object, as shown below.

Expand All @@ -54,7 +54,7 @@ export async function handle({ event, resolve }) {
}
```

You can add call multiple `handle` functions with [the `sequence` helper function](#modules-sveltejs-kit-hooks).
You can add call multiple `handle` functions with [the `sequence` helper function](/docs/modules#sveltejs-kit-hooks).

`resolve` also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is an object that can have the following fields:

Expand All @@ -71,7 +71,7 @@ export async function handle({ event, resolve }) {
}
```

> Disabling [server-side rendering](#appendix-ssr) effectively turns your SvelteKit app into a [**single-page app** or SPA](#appendix-csr-and-spa). In most situations this is not recommended ([see appendix](#appendix-ssr)). Consider whether it's truly appropriate to disable it, and do so selectively rather than for all requests.
> Disabling [server-side rendering](/docs/appendix#ssr) effectively turns your SvelteKit app into a [**single-page app** or SPA](/docs/appendix#csr-and-spa). In most situations this is not recommended ([see appendix](/docs/appendix#ssr)). Consider whether it's truly appropriate to disable it, and do so selectively rather than for all requests.

### handleError

Expand Down Expand Up @@ -99,7 +99,7 @@ export async function handleError({ error, event }) {

### getSession

This function takes the `event` object and returns a `session` object that is [accessible on the client](#modules-$app-stores) and therefore must be safe to expose to users. It runs whenever SvelteKit server-renders a page.
This function takes the `event` object and returns a `session` object that is [accessible on the client](/docs/modules#$app-stores) and therefore must be safe to expose to users. It runs whenever SvelteKit server-renders a page.

If unimplemented, session is `{}`.

Expand Down
Loading