Use awesome Steps component in tutorial (#7496)

Co-authored-by: casungo <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Luiz Ferraz <[email protected]>
Co-authored-by: Shinya Fujino <[email protected]>
Co-authored-by: voxel!() <[email protected]>
Co-authored-by: Ming-jun Lu <[email protected]>
Co-authored-by: Atharva <[email protected]>

src/content/docs/en/tutorial/1-setup/1.mdx

@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Install any tools that you will use to build your Astro website
@@ -52,9 +51,9 @@ Additionally, you will need to download and install a **code editor** to write y
 This tutorial will use **VS Code**, but you can use any editor for your operating system.
 :::
 
+<Steps>
 1. [Download and install VS Code](https://code.visualstudio.com/#alt-downloads) or another code editor of your choice. 
-
-
+</Steps>
 
 
 <Box icon="question-mark">

src/content/docs/en/tutorial/1-setup/2.mdx

@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Run the `create astro` setup wizard to create a new Astro project
@@ -25,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
 
 The preferred way to create a new Astro site is through our `create astro` setup wizard.
 
+<Steps>
 1. In the command line of your terminal, run the following command using your preferred package manager:
 
     <PackageManagerTabs>
@@ -63,16 +63,18 @@ The preferred way to create a new Astro site is through our `create astro` setup
 6. When the prompt asks, "Would you like to install dependencies?" type `y`.
 
 7. When the prompt asks, "Would you like to initialize a new git repository?" type `y`.
+</Steps>
 
 When the install wizard is complete, you no longer need this terminal. You can now open VS Code to continue.
 
 ## Open your project in VS Code
 
-1. Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard.
+<Steps>
+8. Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard.
 
-2. If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). This will provide syntax highlighting and autocompletions for your Astro code.
+9. If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). This will provide syntax highlighting and autocompletions for your Astro code.
 
-3. Make sure the terminal is visible and that you can see the command prompt, such as:
+10. Make sure the terminal is visible and that you can see the command prompt, such as:
 
     ```sh
     user@machine:~/tutorial$
@@ -81,6 +83,7 @@ When the install wizard is complete, you no longer need this terminal. You can n
     :::tip[Keyboard shortcut]
     To toggle the visibility of the terminal, use <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
     :::
+</Steps>
 
 You can now use the terminal built right into this window, instead of your computer's Terminal app, for the rest of this tutorial.
 
@@ -92,7 +95,8 @@ In order to preview your project files _as a website_ while you work, you will n
 
 ### Start the dev server
 
-1. Run the command to start the Astro dev server by typing into VS Code's terminal:
+<Steps>
+11. Run the command to start the Astro dev server by typing into VS Code's terminal:
 
     <PackageManagerTabs>
       <Fragment slot="npm">
@@ -113,19 +117,23 @@ In order to preview your project files _as a website_ while you work, you will n
     </PackageManagerTabs>
 
     Now you should see confirmation in the terminal that Astro is running in dev mode. 🚀
+</Steps>
 
 ## View a preview of your website
 
 Your project files contain all the code necessary to display an Astro website, but the browser is responsible for displaying your code as web pages.
 
-1. Click on the `localhost` link in your terminal window to see a live preview of your new Astro website! 
+<Steps>
+12. Click on the `localhost` link in your terminal window to see a live preview of your new Astro website! 
 
     (Astro uses `http://localhost:4321` by default if port `4321` is available.)
 
     Here's what the Astro "Empty Project" starter website should look like in the browser preview:
 
     ![A blank white page with the word Astro at the top.](/tutorial/minimal.png)
 
+</Steps>
+
 :::tip[Using the Astro dev server]
 
 While the Astro server is running in dev mode, you will NOT be able to run commands in your terminal window. Instead, this pane will give you feedback as you preview your site.

src/content/docs/en/tutorial/1-setup/3.mdx

@@ -12,15 +12,15 @@ import Box from '~/components/tutorial/Box.astro';
 import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Make your first edit to your new website
 </PreCheck>
 
 ## Edit your home page
 
+<Steps>
 1. In your code editor, navigate in the Explorer file pane to `src/pages/index.astro` and click on it to open the file's contents in an editable tab.
 
     The contents of your `index.astro` file should look like this:
@@ -55,6 +55,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
     ```
 
 3. Check the browser preview and you should see your page content updated to the new text.
+</Steps>
 
 Congratulations! You are now an Astro developer!
 

src/content/docs/en/tutorial/1-setup/4.mdx

@@ -10,8 +10,7 @@ import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Put your project repository online
@@ -27,20 +26,21 @@ If you are already familiar with git and have your own workflow, then create a n
 
 Although there are a few ways to get your local code stored in GitHub, this tutorial will guide you through a method that does not require using git in the command line. 
 
+<Steps>
 1. Log in to GitHub.com in a browser and click the <kbd>+</kbd> in the upper right of the screen to make a new repository. 
 
 2. Choose a name for your repository. This does not have to be the same name as your project folder.
 
 3. You will be presented with options, but you do not need to change any of the defaults. Scroll down and click the button to <kbd>Create Repository</kbd>.
 
 4. You will be presented with various setup next steps, but you won't need to use any of them. Make a note of the URL of your repository. You can now exit this page without doing anything.
-
+</Steps>
 
 ## Commit your local code to GitHub
 
 In the last section, you made a change to your page's content. This means that your project files have changed, and VS Code should show a number on top of the "Source" menu icon. This source tab is where you will regularly go to update your files on GitHub.
 
-
+<Steps>
 1. Click the Source Control tab in your VS Code to see a list of files that have changed. If you see a message that you need to install `git`, follow the instructions provided, then reload VS Code.
 
 2. Click the <kbd>•••</kbd> "3 dots" menu above the commit message and choose <kbd>Remote</kbd> > <kbd>Add Remote</kbd>.
@@ -54,7 +54,7 @@ In the last section, you made a change to your page's content. This means that y
 6. You may see a message telling you that you have no "staged" commits, and asking you if you want to stage them. Click <kbd>Always</kbd> and continue.
 
 7. Lastly, the list of changed files should be replaced with a <kbd>Publish</kbd> button. Click this to send your committed changes to GitHub.
-
+</Steps>
 
 ### See your project on GitHub
 

src/content/docs/en/tutorial/1-setup/5.mdx

@@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 <PreCheck>
   - Add your GitHub repository as a new Netlify app
@@ -28,6 +27,7 @@ This tutorial will use **Netlify**, but you are welcome to use your preferred ho
 
 ## Create a new Netlify site
 
+<Steps>
 1. Create a free account at [Netlify](https://netlify.com) if you do not already have one.
 
     Make a note of your username. You will view your dashboard and any sites you create at `https://app.netlify.com/teams/username`
@@ -37,6 +37,7 @@ This tutorial will use **Netlify**, but you are welcome to use your preferred ho
     You will be asked to connect to a Git provider. Choose GitHub and follow the steps onscreen to authenticate your GitHub account. Then, choose your Astro project's GitHub repository from the list provided.
 
 3. At the final step, Netlify will show you your app's site settings. The defaults should be correct for your Astro project, so you can scroll down and click <kbd>Deploy site</kbd>.
+</Steps>
 
 Congratulations, you have an Astro website!
 

src/content/docs/en/tutorial/1-setup/index.mdx

@@ -12,8 +12,7 @@ i18nReady: true
 import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 Now that you know what you're going to build, it's time to set up all the tools you'll need! 
 
@@ -26,23 +25,28 @@ Want to complete this tutorial in an online code editor instead?
 <summary>Follow these instructions, then go directly to Unit 2!</summary>
 
 **Set up StackBlitz**
+
+<Steps>
 1. Visit [astro.new](https://astro.new) and click the button to open the "Empty Project" template in StackBlitz. 
 
 2. Click "Sign in" on the top right to log in using your GitHub credentials.
 
 3. In the upper left of the StackBlitz editor window, click to "fork" the template (save to your own account dashboard).
 
 4. Wait for the project to load, and you will see a live preview of the "Empty Project" starter.
+</Steps>
 
 **Make a Change**
 
 In the file pane, you should see `src/pages/index.astro`. Click to open it, and follow [Write your first line of Astro](/en/tutorial/1-setup/3/) to make a change to this file.
 
 **Create a GitHub Repository**
 
+<Steps>
 1. Press the <kbd>Connect Repository</kbd> button at the top of your list of files, enter a new name for your repository, and click <kbd>Create repo & push</kbd>. 
 
 2. When you have changes to be committed back to GitHub, a "Commit" button will appear at the top left of your workspace. Clicking on this will allow you to enter a commit message, and update your repository.
+</Steps>
 
 **Deploy your Site**
 

src/content/docs/en/tutorial/2-pages/1.mdx

@@ -10,7 +10,7 @@ import Checklist from '~/components/Checklist.astro';
 import Blanks from '~/components/tutorial/Blanks.astro';
 import Box from '~/components/tutorial/Box.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
+import { Steps } from '@astrojs/starlight/components';
 
 Now that you know that `.astro` files are responsible for pages on your website, it's time to create one!
 
@@ -22,6 +22,7 @@ Now that you know that `.astro` files are responsible for pages on your website,
 
 ## Create a new `.astro` file
 
+<Steps>
 1. In the files pane of your code editor, navigate to the folder `src/pages/` where you will see the existing file `index.astro`
 
 2. In that same folder, create a new file named `about.astro`.
@@ -33,6 +34,7 @@ Now that you know that `.astro` files are responsible for pages on your website,
     :::
 
 4. Add `/about` to the end of your website preview's URL in the address bar and check that you can see a page load there. (e.g. `http://localhost:4321/about`)
+</Steps>
 
 Right now, your "About" page should look exactly the same as the first page, but we're going to change that!
 
@@ -83,9 +85,11 @@ Add a third page `blog.astro` to your site, following the [same steps as above](
 
 <details>
 <summary>Show me the steps.</summary>
+<Steps>
 1. Create a new file at `src/pages/blog.astro`.
 2. Copy the entire contents of `index.astro` and paste them into `blog.astro`.
 3. [Add a third navigation link](#add-navigation-links) to the top of every page:
+</Steps>
 
 ```astro title="src/pages/index.astro" ins={4}
 <body>
@@ -124,6 +128,7 @@ If you've followed our setup in Unit 1, you can publish your changes to your liv
 
 When you are happy with the way your preview looks, **commit** your changes to your online repository at GitHub. 
 
+<Steps>
 1. In VS Code, preview the files that have changed since your last commit to GitHub. 
 
     - Go to the **Source Control tab** in the left menu. It should have a small "3" displayed.
@@ -135,6 +140,7 @@ When you are happy with the way your preview looks, **commit** your changes to y
 3. Click the button to <kbd>Sync Changes</kbd> to GitHub.
 
 4. After waiting a few minutes, visit your Netlify URL to verify that your changes are published live.
+</Steps>
 
 :::tip[Commit and deploy regularly]
 Follow these steps every time you pause working! Your changes will be updated in your GitHub repository. If you've deployed to a Netlify website, it will be rebuilt and republished.

src/content/docs/en/tutorial/2-pages/2.mdx

@@ -13,8 +13,7 @@ import Box from '~/components/tutorial/Box.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro'
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 Now that you have built pages using `.astro` files, it's time to make some blog posts using `.md` files!
 
@@ -26,6 +25,7 @@ Now that you have built pages using `.astro` files, it's time to make some blog
 
 ## Create your first `.md` file
 
+<Steps>
 1. Create a new directory at `src/pages/posts/`. 
 
 2. Add a new (empty) file `post-1.md` inside your new `/posts/` folder.
@@ -35,9 +35,11 @@ Now that you have built pages using `.astro` files, it's time to make some blog
 4. Change the browser preview URL to view `/posts/post-2` instead. (This is a page you have not yet created.) 
 
     Note the different output when previewing an "empty" page, and one that doesn't exist. This will help you troubleshoot in the future.
+</Steps>
 
 ## Write Markdown content
 
+<Steps>
 1. Copy or type the following code into `post-1.md`
 
     ```markdown title="src/pages/posts/post-1.md"
@@ -73,13 +75,15 @@ Now that you have built pages using `.astro` files, it's time to make some blog
 2. Check your browser preview again at `http://localhost:4321/posts/post-1`. You should now see content on this page. It may not yet be properly formatted, but don't worry, you will update this later in the tutorial!
 
 3. Use your browser's Dev Tools to inspect this page. Notice that although you have not typed any HTML elements, your Markdown has been converted to HTML. You can see elements such as headings, paragraphs, and list items.
+</Steps>
 
 :::note
 The information at the top of the file, inside the code fences, is called frontmatter. This data—including tags and a post image—is information *about* your post that Astro can use. It does not appear on the page automatically, but you will access it later in the tutorial to enhance your site. 
 :::
 
 ## Link to your posts
 
+<Steps>
 1. Link to your first post with an anchor tag in `src/pages/blog.astro`:
     ```astro title="src/pages/blog.astro" ins={16-18}
     ---
@@ -163,8 +167,8 @@ The information at the top of the file, inside the code fences, is called frontm
 
 4. Check your browser preview and make sure that:
 
-    - All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on `blog.astro` or your Markdown file names.)
-
+    All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on `blog.astro` or your Markdown file names.)
+</Steps>
 
 
 <Box icon="question-mark">