Add Steps component to add-yaml-support.mdx (#8126)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · May 2, 2024 · 1740407 · 1740407
1 parent c00c762
commit 1740407
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/content/docs/en/recipes/add-yaml-support.mdx b/src/content/docs/en/recipes/add-yaml-support.mdx
@@ -4,13 +4,14 @@ description: Learn how you can import YAML data by adding a Rollup plugin to you
 i18nReady: true
 type: recipe
 ---
-
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro.
 
 ## Recipe
 
+<Steps>
 1. Install `@rollup/plugin-yaml`:
 
     <PackageManagerTabs>
@@ -44,7 +45,6 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec
     });
     ```
 
-
 3. Finally, you can import YAML data using an `import` statement:
 
     ```js
@@ -62,3 +62,4 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec
     ```
     This will allow your editor to provide type hints for your YAML data.
     :::
+</Steps>