From 83d56713ef83c357b3c6bc119bbaa4c468f1d064 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 1 Jun 2023 11:34:17 -0400
Subject: [PATCH] move FAQ to /docs/faq (#8672)

* move FAQ to /docs/faq

* remove some more junk

* simplify

* escape

* move redirect to server, prerender

---------

Co-authored-by: Rich Harris <git@rich-harris.dev>
---
 documentation/docs/05-misc/01-faq.md          | 142 ++++++++++++++++++
 ...rnings.md => 02-accessibility-warnings.md} |   0
 .../{02-typescript.md => 03-typescript.md}    |   0
 ...g-v3-to-v4.md => 04-migrating-v3-to-v4.md} |   0
 documentation/faq/100-im-new-to-svelte.md     |   7 -
 .../faq/110-where-can-i-get-support.md        |   9 --
 .../faq/1100-is-svelte-v2-still-available.md  |   7 -
 documentation/faq/1200-how-do-i-do-hmr.md     |   5 -
 ...200-are-there-any-third-party-resources.md |   5 -
 .../400-how-can-i-get-syntax-highlighting.md  |   5 -
 ...is-there-a-tool-to-automatically-format.md |   5 -
 .../450-how-do-i-document-my-components.md    |  32 ----
 .../faq/500-what-about-typescript-support.md  |  30 ----
 documentation/faq/600-does-svelte-scale.md    |   5 -
 .../faq/700-is-there-a-component-library.md   |   5 -
 .../faq/800-how-do-i-test-svelte-apps.md      |  22 ---
 documentation/faq/900-is-there-a-router.md    |  15 --
 sites/svelte.dev/src/constants.js             |   1 -
 sites/svelte.dev/src/lib/server/docs/index.js |   1 +
 sites/svelte.dev/src/lib/server/faq/index.js  |  32 ----
 .../svelte.dev/src/lib/server/faq/types.d.ts  |   5 -
 sites/svelte.dev/src/routes/+layout.svelte    |   1 -
 sites/svelte.dev/src/routes/+page.svelte      |   1 -
 .../src/routes/content.json/content.server.js | 107 ++++++-------
 .../svelte.dev/src/routes/faq/+page.server.js |   7 -
 sites/svelte.dev/src/routes/faq/+page.svelte  |  35 -----
 sites/svelte.dev/src/routes/faq/+server.js    |   7 +
 27 files changed, 196 insertions(+), 295 deletions(-)
 create mode 100644 documentation/docs/05-misc/01-faq.md
 rename documentation/docs/05-misc/{01-accessibility-warnings.md => 02-accessibility-warnings.md} (100%)
 rename documentation/docs/05-misc/{02-typescript.md => 03-typescript.md} (100%)
 rename documentation/docs/05-misc/{03-migrating-v3-to-v4.md => 04-migrating-v3-to-v4.md} (100%)
 delete mode 100644 documentation/faq/100-im-new-to-svelte.md
 delete mode 100644 documentation/faq/110-where-can-i-get-support.md
 delete mode 100644 documentation/faq/1100-is-svelte-v2-still-available.md
 delete mode 100644 documentation/faq/1200-how-do-i-do-hmr.md
 delete mode 100644 documentation/faq/200-are-there-any-third-party-resources.md
 delete mode 100644 documentation/faq/400-how-can-i-get-syntax-highlighting.md
 delete mode 100644 documentation/faq/425-is-there-a-tool-to-automatically-format.md
 delete mode 100644 documentation/faq/450-how-do-i-document-my-components.md
 delete mode 100644 documentation/faq/500-what-about-typescript-support.md
 delete mode 100644 documentation/faq/600-does-svelte-scale.md
 delete mode 100644 documentation/faq/700-is-there-a-component-library.md
 delete mode 100644 documentation/faq/800-how-do-i-test-svelte-apps.md
 delete mode 100644 documentation/faq/900-is-there-a-router.md
 delete mode 100644 sites/svelte.dev/src/lib/server/faq/index.js
 delete mode 100644 sites/svelte.dev/src/lib/server/faq/types.d.ts
 delete mode 100644 sites/svelte.dev/src/routes/faq/+page.server.js
 delete mode 100644 sites/svelte.dev/src/routes/faq/+page.svelte
 create mode 100644 sites/svelte.dev/src/routes/faq/+server.js

diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/05-misc/01-faq.md
new file mode 100644
index 0000000000..10bb9b3e84
--- /dev/null
+++ b/documentation/docs/05-misc/01-faq.md
@@ -0,0 +1,142 @@
+---
+title: Frequently asked questions
+---
+
+## I'm new to Svelte. Where should I start?
+
+We think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+
+Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
+
+## Where can I get support?
+
+If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start.
+
+Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!
+
+There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.
+
+## Are there any third-party resources?
+
+Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
+
+## How can I get VS Code to syntax-highlight my .svelte files?
+
+There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Is there a tool to automatically format my .svelte files?
+
+You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
+
+## How do I document my components?
+
+In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
+
+````svelte
+<script>
+	/** What should we call the user? */
+	export let name = 'world';
+</script>
+
+<!--
+@component
+Here's some documentation for this component.
+It will show up on hover.
+
+- You can use markdown here.
+- You can also use code blocks here.
+- Usage:
+  ```tsx
+  <main name="Arethra">
+  ```
+-->
+<main>
+	<h1>
+		Hello, {name}
+	</h1>
+</main>
+````
+
+Note: The `@component` is necessary in the HTML comment which describes your component.
+
+## What about TypeScript support?
+
+You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
+
+To declare the type of a reactive variable in a Svelte template, you should use the following syntax:
+
+```ts
+const count: number = 100;
+
+// ---cut---
+let x: number;
+$: x = count + 1;
+```
+
+To import a type or interface make sure to use [TypeScript's `type` modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export):
+
+```ts
+// @filename: SomeFile.ts
+export interface SomeInterface {
+	foo: string;
+}
+
+// @filename: index.ts
+// ---cut---
+import type { SomeInterface } from './SomeFile';
+```
+
+You must use the `type` modifier because `svelte-preprocess` doesn't know whether an import is a type or a value — it only transpiles one file at a time without knowledge of the other files and therefore can't safely erase imports which only contain types without this modifier present.
+
+## Does Svelte scale?
+
+There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
+
+## Is there a UI component library?
+
+There are several UI component libraries as well as standalone components. Find them under the [components section](https://sveltesociety.dev/components) of the Svelte Society website.
+
+## How do I test Svelte apps?
+
+How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
+
+A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
+
+_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.
+
+_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).
+
+_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.
+
+Some resources for getting started with testing:
+
+- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
+- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
+- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
+- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
+- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
+- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
+
+## Is there a router?
+
+The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+
+However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
+
+If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
+
+If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
+
+[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
+
+You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers).
+
+## Is Svelte v2 still available?
+
+New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
+
+The documentation is still available [here](https://v2.svelte.dev/guide).
+
+## How do I do hot module reloading?
+
+We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).
diff --git a/documentation/docs/05-misc/01-accessibility-warnings.md b/documentation/docs/05-misc/02-accessibility-warnings.md
similarity index 100%
rename from documentation/docs/05-misc/01-accessibility-warnings.md
rename to documentation/docs/05-misc/02-accessibility-warnings.md
diff --git a/documentation/docs/05-misc/02-typescript.md b/documentation/docs/05-misc/03-typescript.md
similarity index 100%
rename from documentation/docs/05-misc/02-typescript.md
rename to documentation/docs/05-misc/03-typescript.md
diff --git a/documentation/docs/05-misc/03-migrating-v3-to-v4.md b/documentation/docs/05-misc/04-migrating-v3-to-v4.md
similarity index 100%
rename from documentation/docs/05-misc/03-migrating-v3-to-v4.md
rename to documentation/docs/05-misc/04-migrating-v3-to-v4.md
diff --git a/documentation/faq/100-im-new-to-svelte.md b/documentation/faq/100-im-new-to-svelte.md
deleted file mode 100644
index 5bd7b96379..0000000000
--- a/documentation/faq/100-im-new-to-svelte.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-question: I'm new to Svelte. Where should I start?
----
-
-We think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
-
-Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
diff --git a/documentation/faq/110-where-can-i-get-support.md b/documentation/faq/110-where-can-i-get-support.md
deleted file mode 100644
index 45e61a823f..0000000000
--- a/documentation/faq/110-where-can-i-get-support.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-question: Where can I get support?
----
-
-If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start.
-
-Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!
-
-There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.
diff --git a/documentation/faq/1100-is-svelte-v2-still-available.md b/documentation/faq/1100-is-svelte-v2-still-available.md
deleted file mode 100644
index 5ba19c8116..0000000000
--- a/documentation/faq/1100-is-svelte-v2-still-available.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-question: Is Svelte v2 still available?
----
-
-New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
-
-The documentation is still available [here](https://v2.svelte.dev/guide).
diff --git a/documentation/faq/1200-how-do-i-do-hmr.md b/documentation/faq/1200-how-do-i-do-hmr.md
deleted file mode 100644
index e9a4fd9de8..0000000000
--- a/documentation/faq/1200-how-do-i-do-hmr.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: How do I do hot module reloading?
----
-
-We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).
diff --git a/documentation/faq/200-are-there-any-third-party-resources.md b/documentation/faq/200-are-there-any-third-party-resources.md
deleted file mode 100644
index a4da9628a6..0000000000
--- a/documentation/faq/200-are-there-any-third-party-resources.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: Are there any third-party resources?
----
-
-Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
diff --git a/documentation/faq/400-how-can-i-get-syntax-highlighting.md b/documentation/faq/400-how-can-i-get-syntax-highlighting.md
deleted file mode 100644
index 96a80e3c32..0000000000
--- a/documentation/faq/400-how-can-i-get-syntax-highlighting.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: How can I get VS Code to syntax-highlight my .svelte files?
----
-
-There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
diff --git a/documentation/faq/425-is-there-a-tool-to-automatically-format.md b/documentation/faq/425-is-there-a-tool-to-automatically-format.md
deleted file mode 100644
index 10f54d6bb7..0000000000
--- a/documentation/faq/425-is-there-a-tool-to-automatically-format.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: Is there a tool to automatically format my .svelte files?
----
-
-You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
diff --git a/documentation/faq/450-how-do-i-document-my-components.md b/documentation/faq/450-how-do-i-document-my-components.md
deleted file mode 100644
index 78177abd54..0000000000
--- a/documentation/faq/450-how-do-i-document-my-components.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-question: How do I document my components?
----
-
-In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
-
-````svelte
-<script>
-	/** What should we call the user? */
-	export let name = 'world';
-</script>
-
-<!--
-@component
-Here's some documentation for this component.
-It will show up on hover.
-
-- You can use markdown here.
-- You can also use code blocks here.
-- Usage:
-  ```tsx
-  <main name="Arethra">
-  ```
--->
-<main>
-	<h1>
-		Hello, {name}
-	</h1>
-</main>
-````
-
-Note: The `@component` is necessary in the HTML comment which describes your component.
diff --git a/documentation/faq/500-what-about-typescript-support.md b/documentation/faq/500-what-about-typescript-support.md
deleted file mode 100644
index 8b295dc6c4..0000000000
--- a/documentation/faq/500-what-about-typescript-support.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-question: What about TypeScript support?
----
-
-You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
-
-To declare the type of a reactive variable in a Svelte template, you should use the following syntax:
-
-```ts
-const count: number = 100;
-
-// ---cut---
-let x: number;
-$: x = count + 1;
-```
-
-To import a type or interface make sure to use [TypeScript's `type` modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export):
-
-```ts
-// @filename: SomeFile.ts
-export interface SomeInterface {
-	foo: string;
-}
-
-// @filename: index.ts
-// ---cut---
-import type { SomeInterface } from './SomeFile';
-```
-
-You must use the `type` modifier because `svelte-preprocess` doesn't know whether an import is a type or a value — it only transpiles one file at a time without knowledge of the other files and therefore can't safely erase imports which only contain types without this modifier present.
diff --git a/documentation/faq/600-does-svelte-scale.md b/documentation/faq/600-does-svelte-scale.md
deleted file mode 100644
index 06c9b58a97..0000000000
--- a/documentation/faq/600-does-svelte-scale.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: Does Svelte scale?
----
-
-There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
diff --git a/documentation/faq/700-is-there-a-component-library.md b/documentation/faq/700-is-there-a-component-library.md
deleted file mode 100644
index 30460da38c..0000000000
--- a/documentation/faq/700-is-there-a-component-library.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-question: Is there a UI component library?
----
-
-There are several UI component libraries as well as standalone components. Find them under the [components section](https://sveltesociety.dev/components) of the Svelte Society website.
diff --git a/documentation/faq/800-how-do-i-test-svelte-apps.md b/documentation/faq/800-how-do-i-test-svelte-apps.md
deleted file mode 100644
index 279a2856c5..0000000000
--- a/documentation/faq/800-how-do-i-test-svelte-apps.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-question: How do I test Svelte apps?
----
-
-How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
-
-A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
-
-_Unit Tests_: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup [Vitest](https://vitest.dev/) for unit testing. There are a number of other test runners that could be used as well.
-
-_Component Tests_: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like [Vitest](https://vitest.dev/) to solutions that leverage an actual browser to provide a visual testing capability such as [Playwright](https://playwright.dev/docs/test-components) or [Cypress](https://www.cypress.io/).
-
-_End-to-End Tests_: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup [Playwright](https://playwright.dev/) for end-to-end testing. There are many other E2E test libraries available for use as well.
-
-Some resources for getting started with testing:
-
-- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
-- [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
-- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
-- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
-- [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
-- [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
diff --git a/documentation/faq/900-is-there-a-router.md b/documentation/faq/900-is-there-a-router.md
deleted file mode 100644
index 3bbc37fcb9..0000000000
--- a/documentation/faq/900-is-there-a-router.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-question: Is there a router?
----
-
-The official routing library is [SvelteKit](https://kit.svelte.dev/). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
-
-However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
-
-If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
-
-If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
-
-[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
-
-You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/components#routers).
diff --git a/sites/svelte.dev/src/constants.js b/sites/svelte.dev/src/constants.js
index 866d48bf14..cf5039379f 100644
--- a/sites/svelte.dev/src/constants.js
+++ b/sites/svelte.dev/src/constants.js
@@ -5,6 +5,5 @@ export const CONTENT_BASE_PATHS = {
 	BLOG: `${CONTENT_BASE}/blog`,
 	TUTORIAL: `${CONTENT_BASE}/tutorial`,
 	DOCS: `${CONTENT_BASE}/docs`,
-	FAQ: `${CONTENT_BASE}/faq`,
 	EXAMPLES: `${CONTENT_BASE}/examples`
 };
diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index 3dff81dd47..8530d76e21 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/sites/svelte.dev/src/lib/server/docs/index.js
@@ -109,6 +109,7 @@ function get_sections(markdown) {
 			title: removeMarkdown(
 				escape(transform(match[1], { paragraph: (txt) => txt }))
 					.replace(/<\/?code>/g, '')
+					.replace(/&#39;/g, "'")
 					.replace(/&quot;/g, '"')
 					.replace(/&lt;/g, '<')
 					.replace(/&gt;/g, '>')
diff --git a/sites/svelte.dev/src/lib/server/faq/index.js b/sites/svelte.dev/src/lib/server/faq/index.js
deleted file mode 100644
index 6622d42f92..0000000000
--- a/sites/svelte.dev/src/lib/server/faq/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @ts-check
-import { modules } from '$lib/generated/type-info';
-import fs from 'node:fs';
-import { CONTENT_BASE_PATHS } from '../../../constants.js';
-import { extract_frontmatter } from '../markdown/index.js';
-import { render_markdown } from '../markdown/renderer.js';
-
-/** @param {import('./types').FAQData} faq_data */
-export async function get_parsed_faq(faq_data) {
-	const str = faq_data.map(({ content, title }) => `## ${title}\n\n${content}`).join('\n\n');
-
-	return await render_markdown('faq', str, { modules });
-}
-
-/**
- * @returns {import('./types').FAQData}
- */
-export function get_faq_data(base = CONTENT_BASE_PATHS.FAQ) {
-	const faqs = [];
-
-	for (const file of fs.readdirSync(base)) {
-		const { metadata, body } = extract_frontmatter(fs.readFileSync(`${base}/${file}`, 'utf-8'));
-
-		faqs.push({
-			title: metadata.question, // Initialise with empty
-			slug: file.split('-').slice(1).join('-').replace('.md', ''),
-			content: body
-		});
-	}
-
-	return faqs;
-}
diff --git a/sites/svelte.dev/src/lib/server/faq/types.d.ts b/sites/svelte.dev/src/lib/server/faq/types.d.ts
deleted file mode 100644
index dea3d12ee0..0000000000
--- a/sites/svelte.dev/src/lib/server/faq/types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type FAQData = {
-	title: string;
-	slug: string;
-	content: string;
-}[];
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index c454c12f8c..65dc0a8137 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -33,7 +33,6 @@
 				<NavItem href="/examples">Examples</NavItem>
 				<NavItem href="/repl">REPL</NavItem>
 				<NavItem href="/blog">Blog</NavItem>
-				<NavItem href="/faq">FAQ</NavItem>
 
 				<Separator />
 
diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index 46658faa49..d8c125c2a2 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -74,7 +74,6 @@
 	<a href="/docs">Docs</a>
 	<a href="/examples">Examples</a>
 	<a href="/blog">Blog</a>
-	<a href="/faq">FAQ</a>
 	<a href="https://opencollective.com/svelte">Open Collective</a>
 </footer>
 
diff --git a/sites/svelte.dev/src/routes/content.json/content.server.js b/sites/svelte.dev/src/routes/content.json/content.server.js
index 1fae873ba1..f16b404708 100644
--- a/sites/svelte.dev/src/routes/content.json/content.server.js
+++ b/sites/svelte.dev/src/routes/content.json/content.server.js
@@ -13,91 +13,76 @@ import { CONTENT_BASE } from '../../constants.js';
 
 const base = CONTENT_BASE;
 
-const categories = [
-	{
-		slug: 'docs',
-		label: null,
-		/** @param {string[]} parts */
-		href: (parts) => (parts.length > 1 ? `/docs/${parts[0]}#${parts.at(-1)}` : `/docs/${parts[0]}`)
-	},
-	{
-		slug: 'faq',
-		label: 'FAQ',
-		/** @param {string[]} parts */
-		href: (parts) => `/faq#${parts.join('-')}`
-	}
-];
+/** @param {string[]} parts */
+function get_href(parts) {
+	return parts.length > 1 ? `/docs/${parts[0]}#${parts.at(-1)}` : `/docs/${parts[0]}`;
+}
 
 export function content() {
 	/** @type {import('@sveltejs/site-kit/search').Block[]} */
 	const blocks = [];
 
-	for (const category of categories) {
-		const breadcrumbs = category.label ? [category.label] : [];
+	const breadcrumbs = [];
 
-		for (const file of glob('**/*.md', { cwd: `${base}/${category.slug}` })) {
-			const basename = path.basename(file);
-			const match = /\d{2}-(.+)\.md/.exec(basename);
-			if (!match) continue;
+	for (const file of glob('**/*.md', { cwd: `${base}/docs` })) {
+		const basename = path.basename(file);
+		const match = /\d{2}-(.+)\.md/.exec(basename);
+		if (!match) continue;
 
-			const slug = match[1];
+		const slug = match[1];
 
-			const filepath = `${base}/${category.slug}/${file}`;
-			// const markdown = replace_placeholders(fs.readFileSync(filepath, 'utf-8'));
-			const markdown = replace_export_type_placeholders(
-				fs.readFileSync(filepath, 'utf-8'),
-				modules
-			);
+		const filepath = `${base}/docs/${file}`;
+		// const markdown = replace_placeholders(fs.readFileSync(filepath, 'utf-8'));
+		const markdown = replace_export_type_placeholders(fs.readFileSync(filepath, 'utf-8'), modules);
 
-			const { body, metadata } = extract_frontmatter(markdown);
+		const { body, metadata } = extract_frontmatter(markdown);
 
-			const sections = body.trim().split(/^## /m);
-			const intro = sections.shift().trim();
-			const rank = +metadata.rank || undefined;
+		const sections = body.trim().split(/^## /m);
+		const intro = sections.shift().trim();
+		const rank = +metadata.rank || undefined;
+
+		blocks.push({
+			breadcrumbs: [...breadcrumbs, removeMarkdown(remove_TYPE(metadata.title) ?? '')],
+			href: get_href([slug]),
+			content: plaintext(intro),
+			rank
+		});
+
+		for (const section of sections) {
+			const lines = section.split('\n');
+			const h2 = lines.shift();
+			const content = lines.join('\n');
+
+			const subsections = content.trim().split('## ');
+
+			const intro = subsections.shift().trim();
 
 			blocks.push({
-				breadcrumbs: [...breadcrumbs, removeMarkdown(remove_TYPE(metadata.title) ?? '')],
-				href: category.href([slug]),
+				breadcrumbs: [
+					...breadcrumbs,
+					removeMarkdown(remove_TYPE(metadata.title)),
+					remove_TYPE(removeMarkdown(h2))
+				],
+				href: get_href([slug, normalizeSlugify(h2)]),
 				content: plaintext(intro),
 				rank
 			});
 
-			for (const section of sections) {
-				const lines = section.split('\n');
-				const h2 = lines.shift();
-				const content = lines.join('\n');
-
-				const subsections = content.trim().split('## ');
-
-				const intro = subsections.shift().trim();
+			for (const subsection of subsections) {
+				const lines = subsection.split('\n');
+				const h3 = lines.shift();
 
 				blocks.push({
 					breadcrumbs: [
 						...breadcrumbs,
 						removeMarkdown(remove_TYPE(metadata.title)),
-						remove_TYPE(removeMarkdown(h2))
+						removeMarkdown(remove_TYPE(h2)),
+						removeMarkdown(remove_TYPE(h3))
 					],
-					href: category.href([slug, normalizeSlugify(h2)]),
-					content: plaintext(intro),
+					href: get_href([slug, normalizeSlugify(h2), normalizeSlugify(h3)]),
+					content: plaintext(lines.join('\n').trim()),
 					rank
 				});
-
-				for (const subsection of subsections) {
-					const lines = subsection.split('\n');
-					const h3 = lines.shift();
-
-					blocks.push({
-						breadcrumbs: [
-							...breadcrumbs,
-							removeMarkdown(remove_TYPE(metadata.title)),
-							removeMarkdown(remove_TYPE(h2)),
-							removeMarkdown(remove_TYPE(h3))
-						],
-						href: category.href([slug, normalizeSlugify(h2), normalizeSlugify(h3)]),
-						content: plaintext(lines.join('\n').trim()),
-						rank
-					});
-				}
 			}
 		}
 	}
diff --git a/sites/svelte.dev/src/routes/faq/+page.server.js b/sites/svelte.dev/src/routes/faq/+page.server.js
deleted file mode 100644
index 6dec7eb00e..0000000000
--- a/sites/svelte.dev/src/routes/faq/+page.server.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { get_parsed_faq, get_faq_data } from '$lib/server/faq/index.js';
-
-export const prerender = true;
-
-export async function load() {
-	return { faq: get_parsed_faq(get_faq_data()) };
-}
diff --git a/sites/svelte.dev/src/routes/faq/+page.svelte b/sites/svelte.dev/src/routes/faq/+page.svelte
deleted file mode 100644
index 1984ab83d9..0000000000
--- a/sites/svelte.dev/src/routes/faq/+page.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-	import * as hovers from '$lib/utils/hovers.js';
-
-	export let data;
-
-	hovers.setup();
-</script>
-
-<svelte:head>
-	<title>FAQ • Svelte</title>
-
-	<meta name="twitter:title" content="Svelte FAQ" />
-	<meta name="twitter:description" content="Frequently asked questions about Svelte" />
-	<meta name="description" content="Frequently asked questions about Svelte" />
-</svelte:head>
-
-<div class="faqs stretch">
-	<h1>Frequently Asked Questions</h1>
-
-	<article class="text">
-		{@html data.faq}
-	</article>
-</div>
-
-<style>
-	.faqs {
-		grid-template-columns: 1fr 1fr;
-		grid-gap: 1em;
-		min-height: calc(100vh - var(--sk-nav-height));
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
-		max-width: var(--sk-page-main-width);
-		margin: 0 auto;
-		tab-size: 2;
-	}
-</style>
diff --git a/sites/svelte.dev/src/routes/faq/+server.js b/sites/svelte.dev/src/routes/faq/+server.js
new file mode 100644
index 0000000000..5b601910e9
--- /dev/null
+++ b/sites/svelte.dev/src/routes/faq/+server.js
@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+
+export const prerender = true;
+
+export function GET() {
+	throw redirect(308, '/docs/faq');
+}