Skip to content

Commit feec81d

Browse files
Full text search (#3717)
* flexsearch * tweak UI * tweak * Update sites/kit.svelte.dev/src/lib/search/Search.svelte * Update sites/kit.svelte.dev/src/lib/search/Search.svelte * work around marked global state sharing * include migrating/faqs * fade in search bar * prevent blocking * remove commented out nav items * ui tweaks * close search box on tapping modal background * update site-kit * tweak style * fix position:fixed css glitch by separating components * fix mobile sizing * tidy up * close on backspace * close with backspace * add search icon, show ctrl-key on windows * use ctrl key on windows * reinstate links * configure typescript * rudimentary recent searches * various fixes * add close button * distinguish between tab and arrow key * explanation * add delete button * remove unused handler * tweak faq page * oops * fix FAQ links * fix links * select first result on enter * multi-page docs * Update sites/kit.svelte.dev/src/lib/search/Search.svelte Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> * Update sites/kit.svelte.dev/src/lib/search/Search.svelte Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> * Update sites/kit.svelte.dev/src/routes/__layout.svelte Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> * Update sites/kit.svelte.dev/src/lib/search/Search.svelte Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com> * explain why we prevent default on spacebar press * move delete button out of <a> * wrap <Search> in <li> * move <SearchBox> inside <main> * use position:fixed on body to prevent scroll while modal is open * hopefully fix safari layout * use label instead of aria-label * use a heading instead of an li * prerender TOC data * err hmmm * fix some contrast ratios, add aria-describedby to input * fix prerendering * make edit link clickable * add aria-live region for no results * focus body when closing modal * fix search result links * update tsconfig * prevent nav links overlapping with search bar * slim down responses * add prev/next links * show contents as footer on mobile * fold migrating into main docs * fix build-blocking bugs * /docs/sections.json -> /docs.json * update config * remove unused file (merge conflict) * update docs * update internal links * fix links * fix gradient overlay * update lockfile * give default template a name, for sake of cloudflare deployment Co-authored-by: Geoff Rich <4992896+geoffrich@users.noreply.github.com>
1 parent b33f75a commit feec81d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2140
-524
lines changed

documentation/docs/00-introduction.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ title: Introduction
66

77
> 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).
88
>
9-
> See the [migration guides](/migrating) for help upgrading from Sapper.
9+
> See the [migration guides](/docs/migrating) for help upgrading from Sapper.
1010
1111
### What is SvelteKit?
1212

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

15-
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.
15+
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.
1616

1717
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.
1818

documentation/docs/01-routing.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ title: Routing
44

55
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`.
66

7-
> You can change this to a different directory by editing the [project config](#configuration).
7+
> You can change this to a different directory by editing the [project config](/docs/configuration).
88
99
There are two types of route — **pages** and **endpoints**.
1010

1111
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.
1212

13-
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.
13+
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.
1414

1515
### Pages
1616

17-
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.
17+
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.
1818

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

@@ -78,7 +78,7 @@ interface Fallthrough {
7878
}
7979
```
8080

81-
> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
81+
> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.
8282
8383
A page like `src/routes/items/[id].svelte` could get its data from `src/routes/items/[id].js`:
8484

@@ -102,7 +102,7 @@ export async function get({ params }) {
102102
}
103103
```
104104

105-
> 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).
105+
> 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).
106106
107107
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):
108108

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

114-
> 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.
114+
> 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.
115115
116116
The returned `body` corresponds to the page's props:
117117

@@ -223,7 +223,7 @@ return {
223223

224224
#### HTTP method overrides
225225

226-
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`:
226+
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`:
227227

228228
```js
229229
// svelte.config.js
@@ -252,7 +252,7 @@ Most commonly, endpoints exist to provide data to the page with which they're pa
252252
253253
### Private modules
254254

255-
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.
255+
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.
256256

257257
### Advanced routing
258258

@@ -288,6 +288,6 @@ src/routes/[qux].svelte
288288
src/routes/foo-[bar].svelte
289289
```
290290

291-
... 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.
291+
... 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.
292292

293293
If no page or endpoint responds to a request, SvelteKit will respond with a generic 404.

documentation/docs/02-layouts.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Layout resets are otherwise identical to normal layout components.
7070

7171
### Error pages
7272

73-
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.
73+
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.
7474

7575
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.
7676

@@ -87,7 +87,7 @@ export interface ErrorLoadInput<Params extends Record<string, string> = Record<s
8787
}
8888
```
8989

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

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

111-
> Layout components also have access to `error` and `status` via the [page store](#modules-$app-stores)
111+
> Layout components also have access to `error` and `status` via the [page store](/docs/modules#$app-stores)
112112
>
113113
> Server-side stack traces will be removed from `error` in production, to avoid exposing privileged information to users.

documentation/docs/03-loading.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ interface Fallthrough {
3939
}
4040
```
4141

42-
> See the [TypeScript](#typescript) section for information on `App.Session` and `App.Stuff`.
42+
> See the [TypeScript](/docs/typescript) section for information on `App.Session` and `App.Stuff`.
4343
4444
A page that loads data from an external API might look like this:
4545

@@ -64,19 +64,19 @@ A page that loads data from an external API might look like this:
6464
6565
`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.
6666

67-
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.
67+
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.
6868

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

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

75-
`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.
75+
`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.
7676

7777
> Code called inside `load` blocks:
7878
>
79-
> - should use the SvelteKit-provided [`fetch`](#loading-input-fetch) wrapper rather than using the native `fetch`
79+
> - should use the SvelteKit-provided [`fetch`](/docs/loading#input-fetch) wrapper rather than using the native `fetch`
8080
> - should not reference `window`, `document`, or any browser-specific objects
8181
> - 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
8282
@@ -94,7 +94,7 @@ The `load` function receives an object containing six fields — `url`, `params`
9494

9595
`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`.
9696

97-
> In some environments this is derived from request headers, which you [may need to configure](#configuration-headers), during server-side rendering
97+
> 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.
9898
9999
#### params
100100

@@ -123,7 +123,7 @@ If the page you're loading has an endpoint, the data returned from it is accessi
123123
124124
#### session
125125

126-
`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.
126+
`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.
127127

128128
#### stuff
129129

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

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

164-
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.
164+
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.

documentation/docs/04-hooks.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ title: Hooks
44

55
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**.
66

7-
> The location of this file can be [configured](#configuration) as `config.kit.files.hooks`
7+
> The location of this file can be [configured](/docs/configuration) as `config.kit.files.hooks`
88
99
### handle
1010

11-
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).
11+
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).
1212

1313
> Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.
1414
@@ -38,7 +38,7 @@ export interface Handle {
3838
}
3939
```
4040

41-
> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
41+
> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.
4242
4343
To add custom data to the request, which is passed to endpoints, populate the `event.locals` object, as shown below.
4444

@@ -54,7 +54,7 @@ export async function handle({ event, resolve }) {
5454
}
5555
```
5656

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

5959
`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:
6060

@@ -71,7 +71,7 @@ export async function handle({ event, resolve }) {
7171
}
7272
```
7373

74-
> 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.
74+
> 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.
7575
7676
### handleError
7777

@@ -99,7 +99,7 @@ export async function handleError({ error, event }) {
9999
100100
### getSession
101101

102-
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.
102+
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.
103103

104104
If unimplemented, session is `{}`.
105105

0 commit comments

Comments
 (0)