document this shit

Author: dummdidumm

apps/svelte.dev/README.md

@@ -1,38 +1,25 @@
-# create-svelte
+# svelte.dev
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+This is the app behind svelte.dev, the official Svelte site.
 
-## Creating a project
+## Development
 
-If you're seeing this, you've probably already done this step. Congrats!
+### Tutorial
 
-```bash
-# create a new project in the current directory
-npx sv create
+The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses Stackblitz WebContainers under the hood in order to boot up a Node runtime in the browser. The Svelte tutorial uses Rollup in a web worker - it does not use WebContainers because a simple web worker is both faster and more reliable (there are known issues with iOS mobile).
 
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
+WebContainers make use of certain features that are only available when certain security-related cors headers are set, namely these two:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
 ```
 
-## Building
-
-To create a production version of your app:
+Because we're doing soft navigation between pages, these headers need to be set for all responses, not just the ones from `/tutorial`.
 
-```bash
-npm run build
-```
+The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute to the elements that load those URLs.
 
-You can preview the production build with `npm run preview`.
+When writing content for the tutorial, you need to be aware of the differences of loading content:
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+- When using content like images for the Svelte tutorial, either place them in the `static/tutorial` folder, or if it's from a different domain, add the `crossorigin` attribute
+- When using content like images for the SvelteKit tutorial, either place them into a `static` folder right in that chapter and reference them, or import them like you can do when using Vite (e.g. `import Svg from './some.svg';`)