separate code spans

Rich-Harris · Rich-Harris · commit 7cb58f653c1d · 2024-10-23T11:42:12.000-04:00
diff --git a/.prettierignore b/.prettierignore
@@ -5,4 +5,5 @@ dist
 pnpm-lock.yaml
 .vercel
 _generated.md
-land-110m.json
+land-110m.json
+/apps/svelte.dev/content/docs
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md
@@ -170,7 +170,7 @@ To create a layout that applies to every page, make a file called `src/routes/+l
 <slot></slot>
 ```
 
-If we create pages for `/`, `/about` and `/settings`...
+If we create pages for ` / `, `/about` and `/settings`...
 
 ```html
 /// file: src/routes/+page.svelte
@@ -291,7 +291,7 @@ If an error is thrown (either `error(...)` or an unexpected error), the response
 
 ### Receiving data
 
-By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API:
+By exporting `POST` / `PUT` / `PATCH` / `DELETE` / `OPTIONS` / `HEAD` handlers, `+server.js` files can be used to create a complete API:
 
 ```svelte
 <!--- file: src/routes/add/+page.svelte --->
@@ -362,8 +362,8 @@ export async function fallback({ request }) {
 
 `+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`/`OPTIONS` requests are always handled by `+server.js` since they do not apply to pages
-- `GET`/`POST`/`HEAD` 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`.
+- `PUT` / `PATCH` / `DELETE` / `OPTIONS` requests are always handled by `+server.js` since they do not apply to pages
+- `GET` / `POST` / `HEAD` 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`.
 - Responses to `GET` requests will include a `Vary: Accept` header, so that proxies and browsers cache HTML and JSON responses separately.
 
 ## $types
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -68,7 +68,7 @@ export const actions = {
 };
 ```
 
-To invoke a named action, add a query parameter with the name prefixed by a `/` character:
+To invoke a named action, add a query parameter with the name prefixed by a ` / ` character:
 
 ```svelte
 <!--- file: src/routes/login/+page.svelte --->
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/40-page-options.md
@@ -94,7 +94,7 @@ SvelteKit will discover pages to prerender automatically, by starting at _entry
 /blog/[slug]  # dynamic, because of `[slug]`
 ```
 
-...SvelteKit will prerender `/` and `/blog`, and in the process discover links like `<a href="/blog/hello-world">` which give it new pages to prerender.
+...SvelteKit will prerender ` / ` and `/blog`, and in the process discover links like `<a href="/blog/hello-world">` which give it new pages to prerender.
 
 Most of the time, that's enough. In some situations, links to pages like `/blog/hello-world` might not exist (or might not exist on prerendered pages), in which case we need to tell SvelteKit about their existence.
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md
@@ -35,7 +35,7 @@ The `fallback` page is an HTML page created by SvelteKit from your page template
 
 On some hosts it may be `index.html` or something else entirely — consult your platform's documentation.
 
-> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with `/` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.
+> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with ` / ` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.
 
 ## Apache
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
@@ -128,7 +128,7 @@ src/routes/[...catchall]/+page.svelte
 
 ## Encoding
 
-Some characters can't be used on the filesystem — `/` on Linux and Mac, `\ / : * ? " < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.
+Some characters can't be used on the filesystem — ` / ` on Linux and Mac, `\ / : * ? " < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.
 
 To use these characters in your routes, you can use hexadecimal escape sequences, which have the format `[x+nn]` where `nn` is a hexadecimal character code:
 
@@ -189,7 +189,7 @@ src/routes/
 └ +layout.svelte
 ```
 
-You can also put a `+page` directly inside a `(group)`, for example if `/` should be an `(app)` or a `(marketing)` page.
+You can also put a `+page` directly inside a `(group)`, for example if ` / ` should be an `(app)` or a `(marketing)` page.
 
 ### Breaking out of layouts
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md b/apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md
@@ -64,7 +64,7 @@ self.addEventListener('fetch', (event) => {
 		const url = new URL(event.request.url);
 		const cache = await caches.open(CACHE);
 
-		// `build`/`files` can always be served from the cache
+		// `build` / `files` can always be served from the cache
 		if (ASSETS.includes(url.pathname)) {
 			const response = await cache.match(url.pathname);
 
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
@@ -222,10 +222,10 @@ You should think carefully about whether or not the changes you make to your pac
 
 `svelte-package` accepts the following options:
 
-- `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package
-- `-i`/`--input` — the input directory which contains all the files of the package. Defaults to `src/lib`
-- `-o`/`--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`
-- `-t`/`--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`
+- `-w` / `--watch` — watch files in `src/lib` for changes and rebuild the package
+- `-i` / `--input` — the input directory which contains all the files of the package. Defaults to `src/lib`
+- `-o` / `--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`
+- `-t` / `--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`
 - `--tsconfig` - the path to a tsconfig or jsconfig. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path.
 
 ## Publishing
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md b/apps/svelte.dev/content/docs/kit/40-best-practices/20-seo.md
@@ -75,7 +75,7 @@ const config = {
 export default config;
 ```
 
-...disabling `csr` in your root `+layout.js`/`+layout.server.js`...
+...disabling `csr` in your root `+layout.js` / `+layout.server.js`...
 
 ```js
 /// file: src/routes/+layout.server.js
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md b/apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
@@ -177,7 +177,7 @@ export function GET({ params, url }) {
 }
 ```
 
-(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)
+(Note that you may also need to proxy `POST` / `PATCH` etc requests, and forward `request.headers`, depending on your needs.)
 
 ### How do I use middleware?
 
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md b/apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
@@ -127,9 +127,9 @@ Previously, layout components received a `segment` prop indicating the child seg
 
 ### URLs
 
-In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.
+In Sapper, all relative URLs were resolved against the base URL — usually ` / `, unless the `basepath` option was used — rather than against the current page.
 
-This caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.
+This caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with ` / `) URLs, since their meaning is not context-dependent.
 
 ### &lt;a&gt; attributes
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -773,7 +773,7 @@ base?: '' | `/${string}`;
 
 </div>
 
-A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
+A root-relative path that must start, but not end with ` / ` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
 
 </div>
 </div>
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md b/apps/svelte.dev/content/docs/svelte/02-runes/01-what-are-runes.md
@@ -6,7 +6,7 @@ title: What are runes?
 >
 > A letter or mark used as a mystical or magic symbol.
 
-Runes are symbols that you use in `.svelte` and `.svelte.js`/`.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.
+Runes are symbols that you use in `.svelte` and `.svelte.js` / `.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.
 
 Runes have a `$` prefix and look like functions:
 
diff --git a/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md b/apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
@@ -83,7 +83,7 @@ class Todo {
 }
 ```
 
-> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields.
+> [!NOTE] The compiler transforms `done` and `text` into `get` / `set` methods on the class prototype referencing private fields.
 
 ## `$state.raw`
 
diff --git a/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md
@@ -61,7 +61,7 @@ The context is then available to children of the component (including slotted co
 - the state is not global, it's scoped to the component. That way it's safe to render your components on the server and not leak state
 - it's clear that the state is not global but rather scoped to a specific component tree and therefore can't be used in other parts of your app
 
-> [!NOTE] `setContext`/`getContext` must be called during component initialisation.
+> [!NOTE] `setContext` / `getContext` must be called during component initialisation.
 
 Context is not inherently reactive. If you need reactive values in context then you can pass a `$state` object into context, whos properties _will_ be reactive.
 
diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md b/apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md
@@ -634,14 +634,14 @@ As before, you can disable whitespace trimming by setting the `preserveWhitespac
 Svelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons:
 
 - it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
-- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
+- elements with `clientWidth` / `clientHeight` / `offsetWidth` / `offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
 - `<input type="range" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback
 
 The `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.
 
 ## Changes to compiler options
 
-- The `false`/`true` (already deprecated previously) and the `"none"` values were removed as valid values from the `css` option
+- The `false` / `true` (already deprecated previously) and the `"none"` values were removed as valid values from the `css` option
 - The `legacy` option was repurposed
 - The `hydratable` option has been removed. Svelte components are always hydratable now
 - The `enableSourcemap` option has been removed. Source maps are always generated now, tooling can choose to ignore it
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md b/apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
@@ -360,7 +360,7 @@ function unmount(component: Record<string, any>): void;
 
 ## untrack
 
-Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
+Use `untrack` to prevent something from being treated as an `$effect` / `$derived` dependency.
 
 https://svelte-5-preview.vercel.app/docs/functions#untrack
 

Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ export function GET({ params, url }) {`
`177`	`177`	`}`
`178`	`178`	```
`179`	`179`
`180`		-(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)
	`180`	+(Note that you may also need to proxy `POST` / `PATCH` etc requests, and forward `request.headers`, depending on your needs.)
`181`	`181`
`182`	`182`	`### How do I use middleware?`
`183`	`183`