Overhaul site-kit (#7892)

* use local fork of site-kit

* start organising CSS a bit

* remove unused theme/typo classes

* remove some unused stuff

* remove some more unused stuff

* remove some unused files

* namespace/tidy up design tokens

* use namespaced tokens

* remove banner

* tweaks

* start work on dark mode

* fix, tidy up

* fixes

* lockfile

* fix css bug

* update error page

* update error page

* fix search

* consolidate some css

* tidy up

* more tidying up

* more tidying up

* tidy

* update styles

* tweak

* WIP dark mode

* fixes and tweaks

* tweaks

* dark mode colours

* more stuff

* homepage stuff

* shrink sidebar a touch

* tweak breakpoints

* tweaks

* tweak

* search list dark mode colours

* more tweaks

* tweak breakpoints

* tweak

* oops

* use correct heading levels

* hide scrollbar

* tweak dimensions

* simplify breakpoints

* try fix scrollbar css

* tidy up

* remove webkit scrollbar stuff

* dont cover scrollbar

* fix search box colours

* clamp scrollable area

* ok try this

Author: Rich-Harris

documentation/docs/10-getting-started/10-introduction.md

@@ -2,13 +2,13 @@
 title: Introduction
 ---
 
-### Before we begin
+## Before we begin
 
 > SvelteKit is in release candidate phase for 1.0 while we address reported issues and add polish. If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
 >
 > See the [migration guides](/docs/migrating) for help upgrading from Sapper.
 
-### What is SvelteKit?
+## What is SvelteKit?
 
 SvelteKit is a framework for building extremely high-performance web apps.
 

documentation/docs/10-getting-started/20-creating-a-project.md

@@ -20,6 +20,6 @@ There are two basic concepts:
 
 Try editing the files to get a feel for how everything works – you may not need to bother reading the rest of this guide!
 
-### Editor setup
+## Editor setup
 
 We recommend using [Visual Studio Code (aka VS Code)](https://code.visualstudio.com/download) with [the Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), but [support also exists for numerous other editors](https://sveltesociety.dev/tools#editor-support).

documentation/docs/10-getting-started/30-project-structure.md

@@ -30,9 +30,9 @@ my-project/
 
 You'll also find common files like `.gitignore` and `.npmrc` (and `.prettierrc` and `.eslintrc.cjs` and so on, if you chose those options when running `npm create svelte@latest`).
 
-### Project files
+## Project files
 
-#### src
+### src
 
 The `src` directory contains the meat of your project.
 
@@ -53,34 +53,34 @@ The `src` directory contains the meat of your project.
 
 You can use `.ts` files instead of `.js` files, if using TypeScript.
 
-#### static
+### static
 
 Any static assets that should be served as-is, like `robots.txt` or `favicon.png`, go in here.
 
-#### tests
+### tests
 
 If you chose to add tests to your project during `npm create svelte@latest`, they will live in this directory.
 
-#### package.json
+### package.json
 
 Your `package.json` file must include `@sveltejs/kit`, `svelte` and `vite` as `devDependencies`.
 
 When you create a project with `npm create svelte@latest`, you'll also notice that `package.json` includes `"type": "module"`. This means that `.js` files are interpreted as native JavaScript modules with `import` and `export` keywords. Legacy CommonJS files need a `.cjs` file extension.
 
-#### svelte.config.js
+### svelte.config.js
 
 This file contains your Svelte and SvelteKit [configuration](/docs/configuration).
 
-#### tsconfig.json
+### tsconfig.json
 
 This file (or `jsconfig.json`, if you prefer type-checked `.js` files over `.ts` files) configures TypeScript, if you added typechecking during `npm create svelte@latest`. Since SvelteKit relies on certain configuration being set a specific way, it generates its own `.svelte-kit/tsconfig.json` file which your own config `extends`.
 
-#### vite.config.js
+### vite.config.js
 
 A SvelteKit project is really just a [Vite](https://vitejs.dev) project that uses the [`@sveltejs/kit/vite`](/docs/modules#sveltejs-kit-vite) plugin, along with any other [Vite configuration](https://vitejs.dev/config/).
 
-### Other files
+## Other files
 
-#### .svelte-kit
+### .svelte-kit
 
 As you develop and build your project, SvelteKit will generate files in a `.svelte-kit` directory (configurable as [`outDir`](/docs/configuration#outdir)). You can ignore its contents, and delete them at any time (they will be regenerated when you next `dev` or `build`).

documentation/docs/10-getting-started/40-web-standards.md

@@ -8,23 +8,23 @@ These APIs are available in all modern browsers and in many non-browser environm
 
 In particular, you'll get comfortable with the following:
 
-### Fetch APIs
+## Fetch APIs
 
 SvelteKit uses [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for getting data from the network. It's available in [hooks](/docs/hooks) and [server routes](/docs/routing#server) as well as in the browser.
 
 > A special version of `fetch` is available in [`load`](/docs/load) functions for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside `load`, you must explicitly pass `cookie` and/or `authorization` headers.) It also allows you to make relative requests, whereas server-side `fetch` normally requires a fully qualified URL.
 
 Besides `fetch` itself, the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) includes the following interfaces:
 
-#### Request
+### Request
 
 An instance of [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) is accessible in [hooks](/docs/hooks) and [server routes](/docs/routing#server) as `event.request`. It contains useful methods like `request.json()` and `request.formData()` for getting data that was posted to an endpoint.
 
-#### Response
+### Response
 
 An instance of [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) is returned from `await fetch(...)` and handlers in `+server.js` files. Fundamentally, a SvelteKit app is a machine for turning a `Request` into a `Response`.
 
-#### Headers
+### Headers
 
 The [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) interface allows you to read incoming `request.headers` and set outgoing `response.headers`:
 
@@ -45,7 +45,7 @@ export function GET(event) {
 }
 ```
 
-### FormData
+## FormData
 
 When dealing with HTML native form submissions you'll be working with [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) objects.
 
@@ -68,15 +68,15 @@ export async function POST(event) {
 }
 ```
 
-### Stream APIs
+## Stream APIs
 
 Most of the time, your endpoints will return complete data, as in the `userAgent` example above. Sometimes, you may need to return a response that's too large to fit in memory in one go, or is delivered in chunks, and for this the platform provides [streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) — [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream), [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) and [TransformStream](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).
 
-### URL APIs
+## URL APIs
 
 URLs are represented by the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface, which includes useful properties like `origin` and `pathname` (and, in the browser, `hash`). This interface shows up in various places — `event.url` in [hooks](/docs/hooks) and [server routes](/docs/routing#server), [`$page.url`](/docs/modules#$app-stores) in [pages](/docs/routing#page), `from` and `to` in [`beforeNavigate` and `afterNavigate`](/docs/modules#$app-navigation) and so on.
 
-#### URLSearchParams
+### URLSearchParams
 
 Wherever you encounter a URL, you can access query parameters via `url.searchParams`, which is an instance of [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams):
 
@@ -93,7 +93,7 @@ export {};
 const foo = url.searchParams.get('foo');
 ```
 
-### Web Crypto
+## Web Crypto
 
 The [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is made available via the `crypto` global. It's used internally for [Content Security Policy](/docs/configuration#csp) headers, but you can also use it for things like generating UUIDs:
 

documentation/docs/20-core-concepts/10-routing.md

@@ -12,9 +12,9 @@ At the heart of SvelteKit is a _filesystem-based router_. The routes of your app
 
 Each route directory contains one or more _route files_, which can be identified by their `+` prefix.
 
-### +page
+## +page
 
-#### +page.svelte
+### +page.svelte
 
 A `+page.svelte` component defines a page of your app. By default, pages are rendered both on the server ([SSR](/docs/glossary#ssr)) for the initial request and in the browser ([CSR](/docs/glossary#csr-and-spa)) for subsequent navigation.
 
@@ -44,7 +44,7 @@ A `+page.svelte` component defines a page of your app. By default, pages are ren
 
 > Note that SvelteKit uses `<a>` elements to navigate between routes, rather than a framework-specific `<Link>` component.
 
-#### +page.js
+### +page.js
 
 Often, a page will need to load some data before it can be rendered. For this, we add a `+page.js` (or `+page.ts`, if you're TypeScript-inclined) module that exports a `load` function:
 
@@ -75,7 +75,7 @@ As well as `load`, `+page.js` can export values that configure the page's behavi
 
 You can find more information about these in [page options](/docs/page-options).
 
-#### +page.server.js
+### +page.server.js
 
 If your `load` function can only run on the server — for example, if it needs to fetch data from a database or you need to access private [environment variables](/docs/modules#$env-static-private) like API keys — then you can rename `+page.js` to `+page.server.js` and change the `PageLoad` type to `PageServerLoad`.
 
@@ -114,7 +114,7 @@ Like `+page.js`, `+page.server.js` can export [page options](/docs/page-options)
 
 A `+page.server.js` file can also export _actions_. If `load` lets you read data from the server, `actions` let you write data _to_ the server using the `<form>` element. To learn how to use them, see the [form actions](/docs/form-actions) section.
 
-### +error
+## +error
 
 If an error occurs during `load`, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an `+error.svelte` file:
 
@@ -133,13 +133,13 @@ SvelteKit will 'walk up the tree' looking for the closest error boundary — if
 
 You can read more about error handling [here](/docs/errors).
 
-### +layout
+## +layout
 
 So far, we've treated pages as entirely standalone components — upon navigation, the existing `+page.svelte` component will be destroyed, and a new one will take its place.
 
 But in many apps, there are elements that should be visible on _every_ page, such as top-level navigation or a footer. Instead of repeating them in every `+page.svelte`, we can put them in _layouts_.
 
-#### +layout.svelte
+### +layout.svelte
 
 To create a layout that applies to every page, make a file called `src/routes/+layout.svelte`. The default layout (the one that SvelteKit uses if you don't bring your own) looks like this...
 
@@ -203,7 +203,7 @@ We can create a layout that only applies to pages below `/settings` (while inher
 
 By default, each layout inherits the next layout above it. Sometimes that isn't what you want - in this case, [advanced layouts](/docs/advanced-routing#advanced-layouts) can help you.
 
-#### +layout.js
+### +layout.js
 
 Just like `+page.svelte` loading data from `+page.js`, your `+layout.svelte` component can get data from a [`load`](/docs/load) function in `+layout.js`.
 
@@ -236,13 +236,13 @@ Data returned from a layout's `load` function is also available to all its child
 
 > Often, layout data is unchanged when navigating between pages. SvelteKit will intelligently re-run [`load`](/docs/load) functions when necessary.
 
-#### +layout.server.js
+### +layout.server.js
 
 To run your layout's `load` function on the server, move it to `+layout.server.js`, and change the `LayoutLoad` type to `LayoutServerLoad`.
 
 Like `+layout.js`, `+layout.server.js` can export [page options](/docs/page-options) — `prerender`, `ssr` and `csr`.
 
-### +server
+## +server
 
 As well as pages, you can define routes with a `+server.js` file (sometimes referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. Your `+server.js` file (or `+server.ts`) exports functions corresponding to HTTP verbs like `GET`, `POST`, `PATCH`, `PUT` and `DELETE` that take a `RequestEvent` argument and return a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.
 
@@ -275,7 +275,7 @@ You can use the [`error`](/docs/modules#sveltejs-kit-error), [`redirect`](/docs/
 
 If an error is thrown (either `throw error(...)` or an unexpected error), the response will be a JSON representation of the error or a fallback error page — which can be customised via `src/error.html` — depending on the `Accept` header. The [`+error.svelte`](#error) component will _not_ be rendered in this case. You can read more about error handling [here](/docs/errors).
 
-#### Receiving data
+### Receiving data
 
 By exporting `POST`/`PUT`/`PATCH`/`DELETE` handlers, `+server.js` files can be used to create a complete API:
 
@@ -319,14 +319,14 @@ export async function POST({ request }) {
 
 > In general, [form actions](/docs/form-actions) are a better way to submit data from the browser to the server.
 
-#### Content negotiation
+### Content negotiation
 
 `+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following rules:
 
 - `PUT`/`PATCH`/`DELETE` requests are always handled by `+server.js` since they do not apply to pages
 - `GET`/`POST` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`
 
-### $types
+## $types
 
 Throughout the examples above, we've been importing types from a `$types.d.ts` file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.
 
@@ -342,7 +342,7 @@ For example, annotating `export let data` with `PageData` (or `LayoutData`, for
 
 In turn, annotating the `load` function with `PageLoad`, `PageServerLoad`, `LayoutLoad` or `LayoutServerLoad` (for `+page.js`, `+page.server.js`, `+layout.js` and `+layout.server.js` respectively) ensures that `params` and the return value are correctly typed.
 
-### Other files
+## Other files
 
 Any other files inside a route directory are ignored by SvelteKit. This means you can colocate components and utility modules with the routes that need them.