Add Steps component to publish-to-npm.mdx (#8086)

* Add Steps component to `publish-to-npm.mdx` * Move filetree within steps --------- Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Reuben Tier <[email protected]> Co-authored-by: Atharva <[email protected]>
withastro · May 2, 2024 · 43e1cbc · 43e1cbc
1 parent eeb38ae
commit 43e1cbc
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/src/content/docs/en/reference/publish-to-npm.mdx b/src/content/docs/en/reference/publish-to-npm.mdx
@@ -3,6 +3,7 @@ title: Publish to NPM
 description: Learn how to publish Astro components to NPM
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 Building a new Astro component? **Publish it to [npm!](https://npmjs.com/)**
@@ -233,17 +234,22 @@ Astro does not currently ship a test runner. _(If you are interested in helping
 
 In the meantime, our current recommendation for testing is:
 
+<Steps>
 1. Add a test `fixtures` directory to your `demo/src/pages` directory.
+
 2. Add a new page for every test that you'd like to run.
+
 3. Each page should include some different component usage that you'd like to test.
+
 4. Run `astro build` to build your fixtures, then compare the output of the `dist/__fixtures__/` directory to what you expected.
+   <FileTree>
+   - my-project/demo/src/pages/\_\_fixtures\_\_/
+     - test-name-01.astro
+     - test-name-02.astro
+     - test-name-03.astro
+   </FileTree>
+</Steps>
 
-<FileTree>
-- my-project/demo/src/pages/\_\_fixtures\_\_/
-  - test-name-01.astro
-  - test-name-02.astro
-  - test-name-03.astro
-</FileTree>
 
 ## Publishing your component