Eduardo <Steps> up!

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.
-

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

@@ -6,10 +6,9 @@ service: ButterCMS
 stub: false
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-
-
 [ButterCMS](https://buttercms.com/) is a headless CMS and blog engine that allows you to publish structured content to use in your project.
 
 ## Integrating with Astro
@@ -28,6 +27,7 @@ To get started, you will need to have the following:
 
 ### Setup
 
+<Steps>
 1. Create a `.env` file in the root of your project and add your API token as an environment variable:
 
     ```ini title=".env"
@@ -64,6 +64,7 @@ To get started, you will need to have the following:
 
     export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
     ```
+</Steps>
 
 **This authenticates the SDK using your API Token and exports it to be used across your project.**
 

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

@@ -6,9 +6,8 @@ service: Contentful
 i18nReady: true
 ---
 import { FileTree } from '@astrojs/starlight/components';
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 [Contentful](https://www.contentful.com/) is a headless CMS that allows you to manage content, integrate with other services, and publish to multiple platforms.
 
@@ -545,21 +544,25 @@ If your project is using Astro's default static mode, you will need to set up a
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Go to your site dashboard 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
 
 To set up a webhook in 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 Contentful
 

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

@@ -6,6 +6,7 @@ stub: false
 service: DatoCMS
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 [DatoCMS](https://datocms.com/) is a web-based, headless CMS to manage digital content for your sites and apps.
@@ -38,7 +39,6 @@ interface ImportMetaEnv {
 }
 ```
 
-
 Your root directory should now include these files:
 
 <FileTree title="Project Structure">
@@ -85,7 +85,6 @@ const data = json.data.home;
 ---
 
 <h1>{data.title}</h1>
-
 ```
 
 This GraphQL query will fetch the `title` field in the `home` page from your DatoCMS Project. When you refresh your browser, you should see the title on your page.
@@ -169,10 +168,8 @@ const data = json.data.home;
     }
   })
 }
-
 ```
 
-
 ## Publishing your site
 
 To deploy your website, visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider.
@@ -185,17 +182,25 @@ If your project is using Astro’s default static mode, you will need to set up
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Go to your site dashboard 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
 
 To set up a webhook in 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 DatoCMS
 

src/content/docs/en/guides/cms/decap-cms.mdx

@@ -6,10 +6,11 @@ stub: true
 service: Decap CMS
 i18nReady: true
 ---
-import Grid from '~/components/FluidGrid.astro'
-import Card from '~/components/ShowcaseCard.astro'
-import { FileTree } from '@astrojs/starlight/components'
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import Grid from '~/components/FluidGrid.astro';
+import Card from '~/components/ShowcaseCard.astro';
+import { Steps } from '@astrojs/starlight/components';
+import { FileTree } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 [Decap CMS](https://www.decapcms.org/) (formerly Netlify CMS) is an open-source, Git-based content management system.
 
@@ -55,13 +56,16 @@ There are two options for adding Decap to Astro:
 
 ## Configuration
 
+<Steps>
 1. Create a static admin folder at `public/admin/`
-2. Add `config.yml` to `public/admin/`: 
+
+2. Add `config.yml` to `public/admin/`:
     <FileTree>
       - public
         - admin
           - config.yml
     </FileTree>
+
 3. To add support for content collections, configure each schema in `config.yml`. The following example configures a `blog` collection, defining a `label` for each entry's frontmatter property:
     ```yml title="/public/admin/config.yml"
     collections:
@@ -79,7 +83,6 @@ There are two options for adding Decap to Astro:
     ```
 
 4. Add the `admin` route for your React app. This file can be either `public/admin/index.html` alongside your `config.yml` or, if you prefer to use an Astro route, `src/pages/admin.astro`.
-
     <FileTree>
     - public
       - admin
@@ -107,6 +110,7 @@ There are two options for adding Decap to Astro:
     media_folder: "src/assets/images" # Location where files will be stored in the repo 
     public_folder: "src/assets/images" # The src attribute for uploaded media
     ```
+</Steps>
 
 See the [the Decap CMS configuration documentation](https://decapcms.org/docs/configure-decap-cms/) for full instructions and options.
 

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

@@ -5,6 +5,7 @@ type: cms
 service: Hygraph
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 [Hygraph](https://hygraph.com/) is a federated content management platform. It exposes a GraphQL endpoint for fetching content.
@@ -110,13 +111,15 @@ const posts: Post[] = json.data.blogPosts;
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Deploy your site to Netlify with [this guide](/en/guides/deploy/netlify/). Remember to add your `HYGRAPH_ENDPOINT` to the environment variables.
 
 2. Then Go to your Hygraph project dashboard and click on **Apps**. 
 
 3. Go to the marketplace and search for Netlify and follow the instructions provided.
 
 4. If all went good, now you can deploy your website with a click in the Hygraph interface.
+</Steps>
 
 ## Community Resources
 

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

@@ -5,8 +5,9 @@ type: cms
 service: Keystatic
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 [Keystatic](https://keystatic.com/) is an open source, headless content-management system that allows you to structure your content and sync it with GitHub.
 
@@ -157,30 +158,30 @@ Visit `http://127.0.0.1:4321/keystatic` in the browser to see the Keystatic Admi
 
 ## Creating a new post
 
+<Steps>
 1. In the Keystatic Admin UI dashboard, click on the “Posts” collection.
 
- 2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post.
-
- 3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page.
-
- 4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post:
+2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post.
 
-		<FileTree title="Project Structure">
-		- src/
-		  - content/
-		    - posts/
-		      - **my-first-post.mdoc**
-		</FileTree>
+3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page.
 
-5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example: 
+4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post:
+    <FileTree title="Project Structure">
+    - src/
+      - content/
+        - posts/
+          - **my-first-post.mdoc**
+    </FileTree>
 
-		```markdown
-		---
-		title: My First Post
-		---
-
-		This is my very first post. I am **super** excited!
-		```
+5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example: 
+      ```markdown
+      ---
+      title: My First Post
+      ---
+
+      This is my very first post. I am **super** excited!
+      ```
+</Steps>
 
 ## Rendering Keystatic content
 

src/content/docs/en/guides/cms/kontent-ai.mdx

@@ -5,6 +5,7 @@ type: cms
 service: Kontent.ai
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
@@ -529,19 +530,27 @@ If your project is using Astro's default static mode, you will need to set up a
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Go to your site dashboard 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
 
 To set up a webhook in 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 Kontent.ai
+##### Adding a webhook to Kontent.ai
 
 In the [Kontent.ai app](https://kontent.ai/learn/docs/webhooks/javascript), go to **Environment settings -> Webhooks**. Click on **Create new webhook** and provide a name for your new webhook. Paste in the URL you copied from Netlify or Vercel and select which events should trigger the webhook. By default, for rebuilding your site when published content changes, you only need **Publish** and **Unpublish** events under **Delivery API triggers**. When you're finished, click on Save.