Make site work on IPFS (#9539)

Rich-Harris · benmccann · web-flow · commit f8cf1fec3609 · 2023-05-26T21:49:34.000-07:00
Co-authored-by: Ben McCann &lt;322311+benmccann@users.noreply.github.com&gt;
diff --git a/documentation/docs/10-getting-started/20-creating-a-project.md b/documentation/docs/10-getting-started/20-creating-a-project.md
@@ -11,7 +11,7 @@ npm install
 npm run dev
 ```
 
-The first command will scaffold a new project in the `my-app` directory asking you if you'd like to set up some basic tooling such as TypeScript. See the FAQ for [pointers on setting up additional tooling](/faq#integrations). The subsequent commands will then install its dependencies and start a server on [localhost:5173](http://localhost:5173).
+The first command will scaffold a new project in the `my-app` directory asking you if you'd like to set up some basic tooling such as TypeScript. See the FAQ for [pointers on setting up additional tooling](../faq#integrations). The subsequent commands will then install its dependencies and start a server on [localhost:5173](http://localhost:5173).
 
 There are two basic concepts:
 
diff --git a/documentation/docs/10-getting-started/30-project-structure.md b/documentation/docs/10-getting-started/30-project-structure.md
@@ -46,13 +46,13 @@ The `src` directory contains the meat of your project. Everything except `src/ro
   - `%sveltekit.body%` — the markup for a rendered page. This should live inside a `<div>` or other element, rather than directly inside `<body>`, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case
   - `%sveltekit.assets%` — either [`paths.assets`](configuration#paths), if specified, or a relative path to [`paths.base`](configuration#paths)
   - `%sveltekit.nonce%` — a [CSP](configuration#csp) nonce for manually included links and scripts, if used
-  - `%sveltekit.env.[NAME]%` - this will be replaced at render time with the `[NAME]` environment variable, which must begin with the [`publicPrefix`](https://kit.svelte.dev/docs/configuration#env) (usually `PUBLIC_`). It will fallback to `''` if not matched.
+  - `%sveltekit.env.[NAME]%` - this will be replaced at render time with the `[NAME]` environment variable, which must begin with the [`publicPrefix`](configuration#env) (usually `PUBLIC_`). It will fallback to `''` if not matched.
 - `error.html` is the page that is rendered when everything else fails. It can contain the following placeholders:
   - `%sveltekit.status%` — the HTTP status
   - `%sveltekit.error.message%` — the error message
-- `hooks.client.js` contains your client [hooks](/docs/hooks)
-- `hooks.server.js` contains your server [hooks](/docs/hooks)
-- `service-worker.js` contains your [service worker](/docs/service-workers)
+- `hooks.client.js` contains your client [hooks](hooks)
+- `hooks.server.js` contains your server [hooks](hooks)
+- `service-worker.js` contains your [service worker](service-workers)
 
 (Whether the project contains `.js` or `.ts` files depends on whether you opt to use TypeScript when you create your project. You can switch between JavaScript and TypeScript in the documentation using the toggle at the bottom of this page.)
 
diff --git a/documentation/docs/20-core-concepts/40-page-options.md b/documentation/docs/20-core-concepts/40-page-options.md
@@ -157,7 +157,7 @@ This option also affects [prerendering](#prerender). If `trailingSlash` is `alwa
 
 ## config
 
-With the concept of [adapters](/docs/adapters), SvelteKit is able to run on a variety of platforms. Each of these might have specific configuration to further tweak the deployment — for example on Vercel you could choose to deploy some parts of your app on the edge and others on serverless environments.
+With the concept of [adapters](adapters), SvelteKit is able to run on a variety of platforms. Each of these might have specific configuration to further tweak the deployment — for example on Vercel you could choose to deploy some parts of your app on the edge and others on serverless environments.
 
 `config` is an object with key-value pairs at the top level. Beyond that, the concrete shape is dependent on the adapter you're using. Every adapter should provide a `Config` interface to import for type safety. Consult the documentation of your adapter for more information.
 
diff --git a/documentation/docs/20-core-concepts/50-state-management.md b/documentation/docs/20-core-concepts/50-state-management.md
@@ -36,7 +36,7 @@ export const actions = {
 
 The `user` variable is shared by everyone who connects to this server. If Alice submitted an embarrassing secret, and Bob visited the page after her, Bob would know Alice's secret. In addition, when Alice returns to the site later in the day, the server may have restarted, losing her data.
 
-Instead, you should _authenticate_ the user using [`cookies`](/docs/load#cookies-and-headers) and persist the data to a database.
+Instead, you should _authenticate_ the user using [`cookies`](load#cookies-and-headers) and persist the data to a database.
 
 ## No side-effects in load
 
@@ -75,13 +75,13 @@ export async function load({ fetch }) {
 }
 ```
 
-...and pass it around to the components that need it, or use [`$page.data`](/docs/load#$page-data).
+...and pass it around to the components that need it, or use [`$page.data`](load#$page-data).
 
 If you're not using SSR, then there's no risk of accidentally exposing one user's data to another. But you should still avoid side-effects in your `load` functions — your application will be much easier to reason about without them.
 
 ## Using stores with context
 
-You might wonder how we're able to use `$page.data` and other [app stores](/docs/modules#$app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](https://learn.svelte.dev/tutorial/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
+You might wonder how we're able to use `$page.data` and other [app stores](modules#$app-stores) if we can't use our own stores. The answer is that app stores on the server use Svelte's [context API](https://learn.svelte.dev/tutorial/context-api) — the store is attached to the component tree with `setContext`, and when you subscribe you retrieve it with `getContext`. We can do the same thing with our own stores:
 
 ```svelte
 /// file: src/routes/+layout.svelte
@@ -167,4 +167,4 @@ If you have state that should survive a reload and/or affect SSR, such as filter
 
 ## Storing ephemeral state in snapshots
 
-Some UI state, such as 'is the accordion open?', is disposable — if the user navigates away or refreshes the page, it doesn't matter if the state is lost. In some cases, you _do_ want the data to persist if the user navigates to a different page and comes back, but storing the state in the URL or in a database would be overkill. For this, SvelteKit provides [snapshots](/docs/snapshots), which let you associate component state with a history entry.
+Some UI state, such as 'is the accordion open?', is disposable — if the user navigates away or refreshes the page, it doesn't matter if the state is lost. In some cases, you _do_ want the data to persist if the user navigates to a different page and comes back, but storing the state in the URL or in a database would be overkill. For this, SvelteKit provides [snapshots](snapshots), which let you associate component state with a history entry.
diff --git a/documentation/docs/25-build-and-deploy/50-adapter-static.md b/documentation/docs/25-build-and-deploy/50-adapter-static.md
@@ -22,7 +22,7 @@ export default {
 			// these options are set automatically — see below
 			pages: 'build',
 			assets: 'build',
-			fallback: null,
+			fallback: undefined,
 			precompress: false,
 			strict: true
 		})
diff --git a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -114,7 +114,7 @@ export {};
 
 ### Worker size limits
 
-When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](/faq#how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window) for more information.
+When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](../faq#how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window) for more information.
 
 ### Accessing the file system
 
diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md
@@ -26,7 +26,7 @@ export default {
 
 ## Deployment configuration
 
-To control how your routes are deployed to Vercel as functions, you can specify deployment configuration, either through the option shown above or with [`export const config`](/docs/page-options#config) inside `+server.js`, `+page(.server).js` and `+layout(.server).js` files.
+To control how your routes are deployed to Vercel as functions, you can specify deployment configuration, either through the option shown above or with [`export const config`](page-options#config) inside `+server.js`, `+page(.server).js` and `+layout(.server).js` files.
 
 For example you could deploy some parts of your app as [Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions)...
 
diff --git a/documentation/docs/30-advanced/30-link-options.md b/documentation/docs/30-advanced/30-link-options.md
@@ -6,7 +6,7 @@ In SvelteKit, `<a>` elements (rather than framework-specific `<Link>` components
 
 You can customise the behaviour of links with `data-sveltekit-*` attributes. These can be applied to the `<a>` itself, or to a parent element.
 
-These options also apply to `<form>` elements with [`method="GET"`](/docs/form-actions#get-vs-post).
+These options also apply to `<form>` elements with [`method="GET"`](form-actions#get-vs-post).
 
 ## data-sveltekit-preload-data
 
@@ -80,7 +80,7 @@ Sometimes you don't want navigation to create a new entry in the browser's sessi
 
 ## data-sveltekit-keepfocus
 
-Sometimes you don't want [focus to be reset](/docs/accessibility#focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input.  Adding a `data-sveltekit-keepfocus` attribute to it...
+Sometimes you don't want [focus to be reset](accessibility#focus-management) after navigation. For example, maybe you have a search form that submits as the user is typing, and you want to keep focus on the text input.  Adding a `data-sveltekit-keepfocus` attribute to it...
 
 ```html
 <form data-sveltekit-keepfocus>
diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md
@@ -160,7 +160,7 @@ You can read more about that feature [here](https://www.typescriptlang.org/docs/
 
 You should avoid using [SvelteKit-specific modules](modules) like `$app` in your packages unless you intend for them to only be consumable by other SvelteKit projects. E.g. rather than using `import { browser } from '$app/environment'` you could use `import { BROWSER } from 'esm-env'` ([see esm-env docs](https://github.com/benmccann/esm-env)). You may also wish to pass in things like the current URL or a navigation action as a prop rather than relying directly on `$app/stores`, `$app/navigation`, etc. Writing your app in this more generic fashion will also make it easier to setup tools for testing, UI demos and so on.
 
-Ensure that you add [aliases](/docs/configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`.
+Ensure that you add [aliases](configuration#alias) via `svelte.config.js` (not `vite.config.js` or `tsconfig.json`), so that they are processed by `svelte-package`.
 
 You should think carefully about whether or not the changes you make to your package are a bug fix, a new feature, or a breaking change, and update the package version accordingly. Note that if you remove any paths from `exports` or any `export` conditions inside them from your existing library, that should be regarded as a breaking change.
 
diff --git a/documentation/docs/60-appendix/05-integrations.md b/documentation/docs/60-appendix/05-integrations.md
@@ -31,4 +31,4 @@ You will need to install `svelte-preprocess` with `npm install --save-dev svelte
 
 ## Integration FAQs
 
-The SvelteKit FAQ has a [section on integrations](/faq#integrations), which may be helpful if you still have questions.
+The SvelteKit FAQ has a [section on integrations](../faq#integrations), which may be helpful if you still have questions.
diff --git a/documentation/docs/60-appendix/10-migrating.md b/documentation/docs/60-appendix/10-migrating.md
@@ -49,7 +49,7 @@ This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start
 
 ### src/server.js
 
-When using `adapter-node` the equivalent is a [custom server](/docs/adapter-node#custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments.
+When using `adapter-node` the equivalent is a [custom server](adapter-node#custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments.
 
 ### src/service-worker.js
 
@@ -146,7 +146,7 @@ To support this environment-agnostic behavior, `fetch` is now available in the g
 
 ## Integrations
 
-See [the FAQ](/faq#integrations) for detailed information about integrations.
+See [the FAQ](../faq#integrations) for detailed information about integrations.
 
 ### HTML minifier
 
diff --git a/documentation/docs/60-appendix/20-additional-resources.md b/documentation/docs/60-appendix/20-additional-resources.md
@@ -4,7 +4,7 @@ title: Additional resources
 
 ## FAQs
 
-Please see the [SvelteKit FAQ](/faq) for solutions to common issues and helpful tips and tricks.
+Please see the [SvelteKit FAQ](../faq) for solutions to common issues and helpful tips and tricks.
 
 The [Svelte FAQ](https://svelte.dev/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) may also be helpful for questions deriving from those libraries.
 
diff --git a/sites/kit.svelte.dev/scripts/check-doc-links.js b/sites/kit.svelte.dev/scripts/check-doc-links.js
@@ -54,6 +54,8 @@ for (const doc of doc_filenames) {
 		const [path] = url.split('#');
 		if (path === 'modules' || path === 'types' || path === 'configuration') continue; // autogenerated docs
 
+		if (path === '../faq') continue;
+
 		if (!doc_urls.has(url)) {
 			bad = true;
 			console.error(`Bad link: ${url} in ${doc}`);
@@ -73,6 +75,8 @@ for (const file of walk_kit_dir(path.join(__dirname, '../../../packages/kit')))
 		const [path] = link.split('#');
 		if (path === 'modules' || path === 'types' || path === 'configuration') continue; // autogenerated docs
 
+		if (path.startsWith('../faq')) continue;
+
 		if (!doc_urls.has(link)) {
 			bad = true;
 			console.error(`Bad link: ${link} in ${file}`);
diff --git a/sites/kit.svelte.dev/src/app.html b/sites/kit.svelte.dev/src/app.html
@@ -7,7 +7,7 @@
 		<meta name="color-scheme" content="dark light" />
 
 		<link rel="manifest" href="/manifest.json" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
 
 		<meta name="twitter:card" content="summary" />
 		<meta name="twitter:site" content="@sveltejs" />
diff --git a/sites/kit.svelte.dev/src/lib/docs/Contents.svelte b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 
 	export let contents = [];
@@ -19,7 +20,7 @@
 								data-sveltekit-preload-data
 								class="page"
 								class:active={path === $page.url.pathname}
-								href={path}
+								href="{base}{path}"
 							>
 								{title}
 							</a>
diff --git a/sites/kit.svelte.dev/src/routes/docs/+page.js b/sites/kit.svelte.dev/src/routes/docs/+page.js
@@ -3,5 +3,5 @@ import { base } from '$app/paths';
 
 /** @type {import('./$types').Load} */
 export function load() {
-	throw redirect(307, `${base}/docs/introduction`);
+	throw redirect(307, `./docs/introduction`);
 }
diff --git a/sites/kit.svelte.dev/src/routes/home/Deployment.svelte b/sites/kit.svelte.dev/src/routes/home/Deployment.svelte
@@ -10,6 +10,7 @@
 	import lambda from './logos/lambda.svg';
 	import azure from './logos/azure.svg';
 	import plus from '$lib/icons/plus.svg';
+	import { base } from '$app/paths';
 </script>
 
 <Section --background="var(--background-1)">
@@ -111,7 +112,7 @@
 
 		<div class="globe">
 			<img
-				src="/edge.svg?{$theme.current}"
+				src="{base}/edge.svg?{$theme.current}"
 				width="100%"
 				height="100%"
 				alt="Dynamically rendered map of the world, centered on the user's location"
diff --git a/sites/kit.svelte.dev/svelte.config.js b/sites/kit.svelte.dev/svelte.config.js
@@ -5,7 +5,11 @@ const config = {
 	kit: {
 		adapter: adapter({
 			runtime: 'edge'
-		})
+		}),
+
+		paths: {
+			relative: true
+		}
 	},
 
 	vitePlugin: {

Original file line number	Diff line number	Diff line change
@@ -31,4 +31,4 @@ You will need to install `svelte-preprocess` with `npm install --save-dev svelte
`31`	`31`
`32`	`32`	`## Integration FAQs`
`33`	`33`
`34`		`-The SvelteKit FAQ has a [section on integrations](/faq#integrations), which may be helpful if you still have questions.`
	`34`	`+The SvelteKit FAQ has a [section on integrations](../faq#integrations), which may be helpful if you still have questions.`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,5 @@ import { base } from '$app/paths';`
`3`	`3`
`4`	`4`	`/** @type {import('./$types').Load} */`
`5`	`5`	`export function load() {`
`6`		- throw redirect(307, `${base}/docs/introduction`);
	`6`	+ throw redirect(307, `./docs/introduction`);
`7`	`7`	`}`