Skip to content

Commit 95ace48

Browse files
committed
combine readmes into contributing.md
1 parent 0b28b7d commit 95ace48

File tree

3 files changed

+43
-36
lines changed

3 files changed

+43
-36
lines changed

CONTRIBUTING.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Development
2+
3+
## Running
4+
5+
```
6+
pnpm install
7+
cd apps/svelte.dev
8+
USE_GIT=true pnpm sync-docs
9+
pnpm run dev
10+
```
11+
12+
## Database setup
13+
14+
Login to [Supabase](https://supabase.com) and create a database. Once done, you should be on your database's dashboard. Duplicate the `.env.example` file and rename it to `.env.local`, and set these environment variables:
15+
16+
- `SUPABASE_URL`: The config URL
17+
- `SUPABASE_KEY`: The public API key
18+
19+
Then, navigate to your database's "SQL Editor", click on "New query", and paste in [setup.sql](./setup.sql). Run this SQL to seed the database and you're good to go.
20+
21+
## Tutorial
22+
23+
The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses [WebContainers](https://webcontainers.io/) 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).
24+
25+
WebContainers require [cross-origin isolation](https://webcontainers.io/guides/quickstart#cross-origin-isolation), which means the document needs to have these headers:
26+
27+
```
28+
Cross-Origin-Embedder-Policy: require-corp
29+
Cross-Origin-Opener-Policy: same-origin
30+
```
31+
32+
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 (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs. For this reason, navigations between the SvelteKit tutorial and other pages (and vice versa) are full page navigations so the headers don't interfere with the rest of the page.
33+
34+
When writing content for the tutorial, you need to be aware of the differences of loading content:
35+
36+
- When using root-relative paths, for a SvelteKit exercise the 'root' is the `static` directory inside the exercise itself, but for a Svelte exercise it is the root of the app so assets should do inside `apps/svelte.dev/static/tutorial`.
37+
- When importing relative assets in a Svelte exercise, Rollup inlines them into the bundle as base64
38+
39+
## Dependencies
40+
41+
If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.

README.md

+1-6
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,4 @@ The tutorial, blog and examples are maintained within this repository.
1414

1515
## Setup
1616

17-
```
18-
pnpm install
19-
cd apps/svelte.dev
20-
USE_GIT=true pnpm sync-docs
21-
pnpm run dev
22-
```
17+
See [CONTRIBUTING.md](CONTRIBUTING.md)

apps/svelte.dev/README.md

+1-30
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,4 @@ The tutorial, blog and examples are maintained within this repository.
1414

1515
## Development
1616

17-
### Database setup
18-
19-
Login to [Supabase](https://supabase.com) and create a database. Once done, you should be on your database's dashboard. Duplicate the `.env.example` file and rename it to `.env.local`, and set these environment variables:
20-
21-
- `SUPABASE_URL`: The config URL
22-
- `SUPABASE_KEY`: The public API key
23-
24-
Then, navigate to your database's "SQL Editor", click on "New query", and paste in [setup.sql](./setup.sql). Run this SQL to seed the database and you're good to go.
25-
26-
### Tutorial
27-
28-
The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses [WebContainers](https://webcontainers.io/) 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).
29-
30-
WebContainers require [cross-origin isolation](https://webcontainers.io/guides/quickstart#cross-origin-isolation), which means the document needs to have these headers:
31-
32-
```
33-
Cross-Origin-Embedder-Policy: require-corp
34-
Cross-Origin-Opener-Policy: same-origin
35-
```
36-
37-
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 (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs. For this reason, navigations between the SvelteKit tutorial and other pages (and vice versa) are full page navigations so the headers don't interfere with the rest of the page.
38-
39-
When writing content for the tutorial, you need to be aware of the differences of loading content:
40-
41-
- When using root-relative paths, for a SvelteKit exercise the 'root' is the `static` directory inside the exercise itself, but for a Svelte exercise it is the root of the app so assets should do inside `apps/svelte.dev/static/tutorial`.
42-
- When importing relative assets in a Svelte exercise, Rollup inlines them into the bundle as base64
43-
44-
### Dependencies
45-
46-
If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.
17+
See [../../CONTRIBUTING.md](CONTRIBUTING.md)

0 commit comments

Comments
 (0)