Add Steps component to builderio.mdx (#8067)

Co-authored-by: Houston (Bot) <[email protected]>
Co-authored-by: Yan <[email protected]>
Co-authored-by: Reuben Tier <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/en/guides/cms/builderio.mdx

@@ -8,6 +8,7 @@ i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 import { FileTree } from '@astrojs/starlight/components';
+import { Steps } from '@astrojs/starlight/components';
 
 [Builder.io](https://www.builder.io/) is a visual CMS that supports drag-and-drop content editing for building websites. 
 
@@ -140,23 +141,27 @@ In the above example, `<builder-component>` tells Builder where to insert the co
 
 #### Setting the new route as the preview URL
 
+<Steps>
 1. Copy the full URL of your preview, including the protocol, to your clipboard (e.g. `https://{your host}/builder-preview`). 
 
 2. Go to the **Models** tab in your Builder space, pick the model you've created and paste the URL from step 1 into the **Preview URL** field. Make sure the URL is complete and includes the protocol, for example `https://`.
 
 3. Click the **Save** button in the upper right.
+</Steps>
 
 :::tip
 When you deploy your site, change the preview URL to match your production URL, for example `https://myAwesomeAstroBlog.com/builder-preview`.
 :::
 
 #### Testing the preview URL setup
 
+<Steps>
 1. Make sure your site is live (e.g. your dev server is running) and the `/builder-preview` route is working.
 
 2. In your Builder space under the **Content** tab, click on **New** to create a new content entry for your `blogpost` model.
 
 3. In the Builder editor that just opened, you should be able to see the `builder-preview.astro` page with a big **Add Block** in the middle.
+</Steps>
 
 :::tip[Troubleshooting]
 
@@ -172,13 +177,19 @@ For more ideas, read [Builder's troubleshooting guide](https://www.builder.io/c/
 
 ### Creating a blog post
 
+<Steps>
 1. In Builder's visual editor, create a new content entry with the following values:
     - **title:** 'First post, woohoo!'
     - **slug:** 'first-post-woohoo'
+
 2. Complete your post using the **Add Block** button and add a text field with some post content.
+
 3. In the text field above the editor, give your entry a name. This is how it will be listed in the Builder app.
+
 4. When you're ready click the **Publish** button in the upper right corner.
+
 5. Create as many posts as you like, ensuring that all content entries contain a `title` and a `slug` as well as some post content.
+</Steps>
 
 ### Displaying a list of blog posts
 
@@ -328,25 +339,37 @@ If your project is using Astro's default static mode, you will need to set up a
 
 ##### Netlify
 
+<Steps>
 1. Go to your site dashboard, then **Site Settings** and click on **Build & deploy**.
+
 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**.
+
 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL.
+</Steps>
 
 ##### Vercel
 
+<Steps>
 1. Go to your project dashboard and click on **Settings**.
+
 2. Under the **Git** tab, find the **Deploy Hooks** section.
+
 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL.
+</Steps>
 
 ##### Adding a webhook to Builder
 
 :::tip[Official resource]
 See [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) for more information.
 :::
 
+<Steps>
 1. In your Builder dashboard, go into your **`blogpost`** model. Under **Show More Options**, select **Edit Webhooks** at the bottom.
+
 2. Add a new webhook by clicking on **Webhook**. Paste the URL generated by your hosting provider into the **Url** field.
+
 3. Click on **Show Advanced** under the URL field and toggle the option to select **Disable Payload**. With the payload disabled, Builder sends a simpler POST request to your hosting provider, which can be helpful as your site grows. Click **Done** to save this selection.
+</Steps>
 
 With this webhook in place, whenever you click the **Publish** button in the Builder editor, your hosting provider rebuilds your site - and Astro fetches the newly published data for you. Nothing to do but lean back and pump out that sweet sweet content!
 
@@ -360,4 +383,3 @@ With this webhook in place, whenever you click the **Publish** button in the Bui
 ## Community resources
 
 - Read [Connecting Builder.io's Visual CMS to Astro](https://www.hamatoyogi.dev/blog/astro-log/connecting-builderio-to-astro) by Yoav Ganbar.
-