Merge pull request #38 from tomoam/update-up-to-20230408

2023/04/08 迄の更新に追従

Author: tomoam

README.md

@@ -6,26 +6,26 @@ A soup-to-nuts interactive tutorial on how to build apps with Svelte.
 
 This repo uses [pnpm](https://pnpm.io/).
 
-## Running the app
+## Developing the app
 
-First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, Esbuild, SvelteKit, Svelte compiler etc) which can subsequently be unpacked on a server to create and run and instance of a SvelteKit application (which powers the output window of the tutorial).
+First, run `node scripts/create-common-bundle`. This packages up everything that's needed to run a SvelteKit app (Vite, Esbuild, SvelteKit, Svelte compiler etc) which can subsequently be unpacked on a server to create and run and instance of a SvelteKit application (which powers the output window of the tutorial). Then, run `dev`:
 
-The next steps depend on whether you want to run this locally in filesystem mode, or in WebContainer mode. For now, it works with filesystem mode only locally. In future, it will run both locally and on the web (using [WebContainers](https://blog.stackblitz.com/posts/introducing-webcontainers/)).
+```bash
+node scripts/create-common-bundle
+pnpm dev
+```
 
-### Local/filesystem mode
+To build for production and run locally:
 
-1. add an `.env` file with `PUBLIC_USE_FILESYSTEM=true` in it
-2. Run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.
-
-### WebContainer mode
-
-1. if an `.env` file exists, modify it so there's `PUBLIC_USE_FILESYSTEM=` in it
-2. Run the app locally with `pnpm dev` or `pnpm build && pnpm preview`.
+```bash
+pnpm build
+pnpm preview
+```
 
 ## Creating new tutorials
 
 Tutorials live inside `content`. Each tutorial consists of a `README.md`, which is the text to the left, and `app-a` and `app-b` folders, which represent the initial and solved state. Files that stay the same can be omitted from `app-b`. Files are marked as deleted in `app-b` if they start with `__delete`. Folders that are marked as deleted in `app-b` if they contain a file named `__delete`.
 
 ## Bumping tutorial dependencies
 
-Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`). After deployment things might be out of date because Vercel caches things, redeploy without cache in that case.
+Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`).

backend/+server.js

@@ -1,28 +1,28 @@
 export const tracks = [
 	{
 		// https://musopen.org/music/9862-the-blue-danube-op-314/
-		src: 'https://learn.svelte.dev/assets/media/music/strauss.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/strauss.mp3',
 		title: 'The Blue Danube Waltz',
 		artist: 'Johann Strauss'
 	},
 
 	{
 		// https://musopen.org/music/43775-the-planets-op-32/
-		src: 'https://learn.svelte.dev/assets/media/music/holst.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/holst.mp3',
 		title: 'Mars, the Bringer of War',
 		artist: 'Gustav Holst'
 	},
 
 	{
 		// https://musopen.org/music/8010-3-gymnopedies/
-		src: 'https://learn.svelte.dev/assets/media/music/satie.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/satie.mp3',
 		title: 'Gymnopédie no. 1',
 		artist: 'Erik Satie'
 	},
 
 	{
 		// https://musopen.org/music/43683-requiem-in-d-minor-k-626/
-		src: 'https://learn.svelte.dev/assets/media/music/mozart.mp3',
+		src: 'https://learn.svelte.jp/assets/media/music/mozart.mp3',
 		title: 'Requiem in D minor, K. 626 - III. Sequence - Lacrymosa',
 		artist: 'Wolfgang Amadeus Mozart'
 	}

backend/README.md

@@ -19,7 +19,8 @@
 		font-family: 'Silian Rail';
 		width: 24em;
 		aspect-ratio: 3.5 / 2.0;
-		background: url(./paper.svg);
+		background: url(./paper.svg) no-repeat 50% 50%;
+		background-size: cover;
 		border-radius: 2px;
 		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
 		padding: 1.5em 1em 1em 1em;

backend/[id]/+server.js

@@ -19,7 +19,8 @@
 		font-family: 'Silian Rail';
 		width: 24em;
 		aspect-ratio: 3.5 / 2.0;
-		background: url(./paper.svg);
+		background: url(./paper.svg) no-repeat 50% 50%;
+		background-size: cover;
 		border-radius: 2px;
 		filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
 		padding: 1.5em 1em 1em 1em;