Tutorial reviews (#153)

leaningtech · Oct 27, 2024 · dd96a5c · dd96a5c
1 parent 147251a
commit dd96a5c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/sites/cheerpx/src/content/docs/13-tutorials/full_os.md b/sites/cheerpx/src/content/docs/13-tutorials/full_os.md
@@ -45,21 +45,21 @@ Loading CheerpX is very simple. Create a new file called `index.html` and popula
 
 ```html title=index.html
 <!doctype html>
-<html lang="en" style="heigth: 100%;">
+<html lang="en" style="height: 100%;">
 	<head>
 		<meta charset="UTF-8" />
 		<title>CheerpX Test</title>
 		<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
 	</head>
-	<body style="heigth: 100%; background: black;"></body>
+	<body style="height: 100%; background: black;"></body>
 </html>
 ```
 
 ## 3. Setup a Web server
 
 We recommend always choosing `nginx` as your Web server when using with CheerpX.
 
-This basic configuration should get you up and running. Please note that CheerpX requires cross-origin isolation, which is enabled via the `Cross-Origin-Opener-Policy' and 'Cross-Origin-Embedder-Policy` headers. For more information see the dedicated [Nginx](/docs/guides/nginx) guide.
+This basic configuration should get you up and running. Please note that CheerpX requires cross-origin isolation, which is enabled via the `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` headers. For more information see the dedicated [Nginx](/docs/guides/nginx) guide.
 
 ```nginx title=nginx.conf
 worker_processes  1;
@@ -105,7 +105,7 @@ nginx -p . -c nginx.conf
 
 You can now see your page at `http://localhost:8080`
 
-Make sire the `cheerpXImage.ext2` and the `index.html` files are both into the same directory where `nginx` was started.
+Make sure the `cheerpXImage.ext2` and the `index.html` files are both in the same directory where `nginx` was started.
 
 ## 4. Create a device for the filesystem
 
@@ -123,6 +123,8 @@ Create a `HttpBytesDevice` from the just created Ext2 image. `OverlayDevice` mak
 </script>
 ```
 
+For more information on `HttpBytesDevice` and `OverlayDevice`, see our [Files and filesystem] guide.
+
 ## 5. Create a CheerpX instance
 
 In the same script tag, pass the `overlayDevice` as a new mount point to the `Cheerpx.Linux.create` method. This option will initialize CheerpX with the newly created device mounted as `/`.
@@ -133,12 +135,14 @@ const cx = await CheerpX.Linux.create({
 });
 ```
 
+To learn more about `Cheerpx.Linux.create`, see the [CheerpX.Linux.create] reference.
+
 ## 6. Attach a console
 
 Create a console element for the output of your program.
 
 ```html
-<pre id="console" style="heigth: 100%;"></pre>
+<pre id="console" style="height: 100%;"></pre>
 ```
 
 And configure CheerpX to use it by adding this snippet at the end of the script.
@@ -147,6 +151,8 @@ And configure CheerpX to use it by adding this snippet at the end of the script.
 cx.setConsole(document.getElementById("console"));
 ```
 
+Learn more about the console setup in the [setConsole] reference.
+
 ## 7. Execute a shell
 
 Use the `cx.run` API to execute the `bash` shell. This setup is very similar to what we use for [WebVM](https://webvm.io)!
@@ -166,3 +172,10 @@ await cx.run("/bin/bash", ["--login"], {
 	gid: 1000,
 });
 ```
+
+Learn more about `cx.run` in the [CheerpX.Linux.run] reference.
+
+[Files and filesystem]: docs/guides/File-System-support
+[CheerpX.Linux.create]: docs/reference/CheerpX-Linux-create
+[setConsole]: docs/reference/CheerpX-Linux-setConsole
+[CheerpX.Linux.run]: docs/reference/CheerpX-Linux-run
diff --git a/sites/cheerpx/src/content/docs/13-tutorials/setup-svelte.md b/sites/cheerpx/src/content/docs/13-tutorials/setup-svelte.md
@@ -5,7 +5,7 @@ description: Using CheerpX together with Svelte
 
 This tutorial will explain how to create a application with Svelte that works together with CheerpX.
 
-## Install Svelte
+## Step 1: Install Svelte
 
 First create a new Svelte app by running:
 
@@ -31,7 +31,7 @@ Click on the `localhost` link in your terminal window to test the development se
 
 (Vite uses `http://localhost:5173/` by default if port `5173` is available.)
 
-## Install Cheerpx
+## Step 2: Install CheerpX
 
 Next, let's install CheerpX:
 
@@ -76,7 +76,7 @@ Create a new file named src/routes/+page.ts to disable Server-Side Rendering ([S
 export const ssr = false;
 ```
 
-## Script
+## Step 3: Modify the Svelte Page
 
 We will now modify `src/routes/+page.svelte` to replace the Svelte example with a full-screen console running `bash` using CheerpX. For more details on the CheerpX logic itself, please see our [Getting Started] guide.
 
@@ -133,4 +133,4 @@ Your web page should refresh automatically and you should see the bash prompt in
 [instructions]: https://github.com/leaningtech/labs/blob/main/sites/cheerpx/src/content/docs/10-getting-started/index.md
 [SharedArrayBuffer]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
 [Cross origin isolation]: https://web.dev/articles/why-coop-coep
-[Getting Started]: https://github.com/leaningtech/labs/blob/main/sites/cheerpx/src/content/docs/10-getting-started/index.md
+[Getting Started]: /docs/getting-started
diff --git a/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx b/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx
@@ -88,14 +88,14 @@ Open `index.html` and add the following content:
 
 ```html title="index.html"
 <!doctype html>
-<html lang="en" style="heigth: 100%;">
+<html lang="en" style="height: 100%;">
 	<head>
 		<meta charset="UTF-8" />
 		<title>CheerpX Simple Executable Test</title>
 		<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
 	</head>
-	<body style="heigth: 100%; background: black;">
-		<pre id="console" style="heigth: 100%;"></pre>
+	<body style="height: 100%; background: black;">
+		<pre id="console" style="height: 100%;"></pre>
 
 		<script type="module">
 			// Initialize CheerpX