docs: Web docs corrections (#3004)

- 03-bundlers.mdx corrections: - `npm install parcel-bundler` must be called with `--save-dev` - `<script src="./src/index.ts">` must be closed with `</script>` - `npx` should be infront of `parcel index.html --no-autoinstall` for better compatibility - added proposed file structure for clearer understanding - changed file structure to the common one - 02-conventions.mdx minor correction: - fixed typo
excaliburjs · Apr 6, 2024 · e2c4613 · e2c4613
1 parent c0b6cdf
commit e2c4613
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/site/docs/01-getting-started/03-bundlers.mdx b/site/docs/01-getting-started/03-bundlers.mdx
@@ -79,10 +79,16 @@ Adding an `import "regenerator-runtime/runtime";` in your entry file is needed t
 
 :::
 
-Using npm to install Parcel, Excalibur, and TypeScript:
+Using npm to install Parcel:
 
     ```bash
-    npm install parcel-bundler excalibur typescript
+    npm install parcel-bundler --save-dev
+    ```
+
+Using npm to install Excalibur and TypeScript:
+
+    ```bash
+    npm install excalibur typescript
     ```
 
 Configure your tsconfig.json:
@@ -91,6 +97,22 @@ Configure your tsconfig.json:
     tsc --init
     ```
 
+The suggested file structure is as follows:
+
+```
+/project_folder
+    /node_modules
+        ...
+
+    /src
+        index.html
+        index.ts
+    
+    package-lock.json
+    package.json
+    tsconfig.json
+```
+
 Create your game script:
 
 ```typescript
@@ -109,15 +131,15 @@ Include the **TypeScript** file in your html:
 <html>
   <head></head>
   <body>
-    <script src="./src/index.ts" />
+    <script src="./index.ts"></script>
   </body>
 </html>
 ```
 
 Build and run with Parcel!
 
     ```bash
-    parcel index.html --no-autoinstall
+    npx parcel src/index.html --no-autoinstall
     ```
 
 ### Webpack

diff --git a/site/docs/02-fundamentals/02-conventions.mdx b/site/docs/02-fundamentals/02-conventions.mdx
@@ -17,11 +17,11 @@ There are a few things that Excalibur does that are good to know before you star
 
 3. Rotation units are in radians.
 
-4. All elapsed times and durations in Excalibur in are milliseconds.
+4. All elapsed times and durations in Excalibur are in milliseconds.
 
 5. Actor z-index's follow the browser way of doing things.
    * Things with larger positive numbers are on top of lower numbers.
 
 6. Excalibur handles offscreen draw culling for you! No need to manage that!
 
-7. Excalibur uses pre-multiplied alphas when drawing which is important to know if you use [Material](/docs/materials)
+7. Excalibur uses pre-multiplied alphas when drawing which is important to know if you use [Material](/docs/materials)