Add Steps component to v1.mdx (#8110)

Co-authored-by: Houston (Bot) <[email protected]>
Co-authored-by: Chirag <[email protected]>

src/content/docs/en/guides/upgrade-to/v1.mdx

@@ -3,9 +3,8 @@ title: Legacy v0.x Upgrade Guide
 description: Archived guide documenting changes between pre-v1 versions of Astro
 i18nReady: false
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 This guide will help you upgrade through breaking changes in pre-v1 versions of Astro.
 
@@ -37,7 +36,6 @@ You can update your project's version of Astro to the latest version using your
   </Fragment>
 </PackageManagerTabs>
 
-
 Read the guide below for major highlights and instructions on how to handle breaking changes.
 
 ## Astro 1.0
@@ -100,6 +98,7 @@ To make migrating easier, a new `legacy.astroFlavoredMarkdown` flag (removed in
 
 If you're not familiar with MDX, here are some steps you can follow to quickly convert an existing "Astro Flavored Markdown" file to MDX. As you learn more about MDX, feel free to explore other ways of writing your pages!
 
+<Steps>
 1. Install the [`@astrojs/mdx`](/en/guides/integrations-guide/mdx/) integration.
 
 2. Change your existing `.md` file extensions to `.mdx`
@@ -150,6 +149,7 @@ If you're not familiar with MDX, here are some steps you can follow to quickly c
 
     <About />    
     ```
+</Steps>
 
 :::tip
 While you are transitioning to MDX, you may wish to enable the `legacy.astroFlavoredMarkdown` flag (removed in v2.0) and include both **`.md` and `.mdx`** files, so that your site continues to function normally even before all your files have been converted. Here is one way you can do that:
@@ -228,7 +228,6 @@ This includes a few changes to be aware of:
 - New `<style is:inline>` directive, to leave a style tag inline in the page template (similar to previous `<script>` behavior).
 - New `<style is:global>` directive to replace `<style global>` in a future release.
 
-
 ```js del={2} ins={4}
 // v0.25
 <script hoist type="module">
@@ -242,7 +241,6 @@ Read [RFC0016](https://github.com/withastro/rfcs/blob/main/proposals/0016-style-
 
 ### Updated `Astro.request` API
 
-
 `Astro.request` has been changed from our custom object to a standard `Request` object. This is part of a project to use more web standard APIs, especially where SSR is concerned.
 
 This includes a few changes to be aware of:
@@ -253,7 +251,6 @@ This includes a few changes to be aware of:
 
 Read [RFC0018](https://github.com/withastro/rfcs/blob/main/proposals/0018-astro-request.md) for more background on these changes.
 
-
 ### Other Changes
 
 - Improve `Astro.slots` API to support passing arguments to function-based slots. This allows for more ergonomic utility components that accept a callback function as a child.
@@ -304,7 +301,6 @@ export default {
 }
 ```
 
-
 | Deprecated Renderers on npm | v0.25+ Integrations on npm |
 | --------------------------- | -------------------------- |
 | @astrojs/renderer-react     | @astrojs/react             |
@@ -390,7 +386,6 @@ Importing CSS files should work anywhere that ESM imports are supported, includi
 
 When a CSS file is imported using this method, any `@import` statements are also resolved and inlined into the imported CSS file. All `url()` references are also resolved relative to the source file, and any `url()` referenced assets will be included in the final build.
 
-
 **2. Absolute URL Path**
 
 **Example:** `<link href="/style.css">`
@@ -402,7 +397,6 @@ We recommend using the `import` approach over the absolute URL approach since it
 
 #### How to Resolve JavaScript Files
 
-
 **1. Absolute URL Path**
 
 **Example:** `<script src="/some-external-script.js" />`
@@ -469,7 +463,6 @@ Previously, all `<script>` elements were read from the final HTML output and pro
 </script>
 ```
 
-
 ## Migrate to v0.23
 
 ### Missing Sass Error
@@ -584,7 +577,6 @@ To learn more about Vite plugins, please visit their [plugin guide](https://vite
 In prior releases, these were configured with `snowpackPlugin` or `snowpackPluginOptions`.
 :::
 
-
 ### Aliasing
 
 In Astro v0.21+, import aliases can be added from `tsconfig.json` or `jsconfig.json`.
@@ -624,14 +616,15 @@ Previously, you could create mini Astro Components inside of the Astro Frontmatt
 
 To migrate to v0.21+, please convert all JSX Astro components (that is, any Astro components created inside of another component’s frontmatter) to standalone components.
 
-
 ### Styling Changes
 
 #### Autoprefixer
 
 Autoprefixer is no longer run by default. To enable:
 
+<Steps>
 1. Install the latest version (`npm install autoprefixer`)
+
 2. Create a `postcss.config.cjs` file at the root of your project with:
    ```js
    module.exports = {
@@ -640,12 +633,15 @@ Autoprefixer is no longer run by default. To enable:
      },
    };
    ```
+</Steps>
 
 #### Tailwind CSS
 
 Ensure you have PostCSS installed. This was optional in previous releases, but is required now:
 
+<Steps>
 1. Install the latest version of postcss (`npm install -D postcss`)
+
 2. Create a `postcss.config.cjs` file at the root of your project with:
    ```js
    module.exports = {
@@ -655,7 +651,7 @@ Ensure you have PostCSS installed. This was optional in previous releases, but i
    };
    ```
    For more information, read the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin)
-
+</Steps>
 
 ### Known Issues
 
@@ -670,5 +666,4 @@ const whereShouldIPutMyImports = "on top!"
 ---
 ```
 
-
 [vite]: https://vitejs.dev