fix(tutorial): prevent Typescript error + tiny data reordering

src/content/docs/en/tutorial/3-components/3.mdx

@@ -99,8 +99,8 @@ Since your site will be viewed on different devices, it's time to create a page
     ---
     <div id="main-menu" class="nav-links">
       <a href="/">Home</a>
-      <a href="/about">About</a>
-      <a href="/blog">Blog</a>
+      <a href="/about/">About</a>
+      <a href="/blog/">Blog</a>
     </div>
     ```
 

src/content/docs/en/tutorial/3-components/4.mdx

@@ -129,16 +129,16 @@ Your header is not yet **interactive** because it can't respond to user input, l
 Adding a `<script>` tag provides client-side JavaScript to "listen" for a user event and then respond accordingly.
 
 <Steps>
-1. Add the following `<script>` tag to `index.astro`, just before the closing `</body>` tag.
+1. Add the following `<script>` tag, using Astro's built-in TypeScript support, to `index.astro`, just before the closing `</body>` tag.
 
     ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
         const menu = document.querySelector('.menu');
 
-        menu.addEventListener('click', () => {
+        menu?.addEventListener('click', () => {
           const isExpanded = menu.getAttribute('aria-expanded') === 'true';
-          menu.setAttribute('aria-expanded', !isExpanded);
+          menu.setAttribute('aria-expanded', `${!isExpanded}`);
         });
       </script>
     </body>
@@ -157,9 +157,9 @@ Instead of writing your JavaScript directly on each page, you can move the conte
     ```js title="src/scripts/menu.js"
     const menu = document.querySelector('.menu');
 
-    menu.addEventListener('click', () => {
+    menu?.addEventListener('click', () => {
       const isExpanded = menu.getAttribute('aria-expanded') === 'true';
-      menu.setAttribute('aria-expanded', !isExpanded);
+      menu.setAttribute('aria-expanded', `${!isExpanded}`);
     });
     ```
 
@@ -170,9 +170,9 @@ Instead of writing your JavaScript directly on each page, you can move the conte
       <script>
         const menu = document.querySelector('.menu');
 
-        menu.addEventListener('click', () => {
+        menu?.addEventListener('click', () => {
           const isExpanded = menu.getAttribute('aria-expanded') === 'true';
-          menu.setAttribute('aria-expanded', !isExpanded);
+          menu.setAttribute('aria-expanded', `${!isExpanded}`);
         });
 
         import "../scripts/menu.js";

src/content/docs/en/tutorial/5-astro-api/3.mdx

@@ -272,17 +272,15 @@ Follow the steps below, then check your work by comparing it to the [final code
 
 1. Copy the `<div class="tags">...</div>` and `<style>...</style>` from `src/pages/tags/index.astro` and reuse it inside `MarkdownPostLayout.astro`: 
 
-    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
+    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={11-15, 19-37}
     ---
     import BaseLayout from './BaseLayout.astro';
     const { frontmatter } = Astro.props;
     --- 
     <BaseLayout pageTitle={frontmatter.title}>
-      <p><em>{frontmatter.description}</em></p>
       <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
-
+      <p><em>{frontmatter.description}</em></p>
       <p>Written by: {frontmatter.author}</p>
-
       <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 
 
       <div class="tags">

src/content/docs/en/tutorial/6-islands/3.mdx

@@ -18,21 +18,25 @@ import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
 There's one more edit to make...
 
-```astro title="src/pages/about.astro" del={5} ins={6}
+```astro title="src/pages/about.astro" del={15} ins={16}
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 const pageTitle = "About Me";
-const happy = true;
-const finished = false;
-const finished = true;
-const goal = 3;
+
 const identity = {
   firstName: "Sarah",
   country: "Canada",
   occupation: "Technical Writer",
   hobbies: ["photography", "birdwatching", "baseball"],
 };
+
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
+
+const happy = true;
+const finished = false;
+const finished = true;
+const goal = 3;
+
 const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";