Add Steps component to preprcms.mdx (#8075)

Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

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

@@ -6,8 +6,9 @@ service: Prepr CMS
 stub: true
 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';
 
 [Prepr CMS](https://www.prepr.io/) is a headless CMS with built-in personalization.
 
@@ -32,8 +33,12 @@ PREPR_ENDPOINT=YOUR_PREPR_API_URL
 ```
 
 You will find your `YOUR_PREPR_API_URL` value from your Prepr account settings:
+
+<Steps>
 1. Go to  **Settings > Access tokens** to view both your Preview and Production access tokens.
+
 2. Use the **API URL** value from the **GraphQL Production** access token to only retrieve published content items for your Astro site.
+</Steps>
 
 ### Configuring the Prepr endpoint
 
@@ -70,9 +75,11 @@ Your root directory should now include these files:
 You will fetch your data from Prepr by writing queries to interact with its GraphQL API.
 
 #### Create a GraphQL query to retrieve your blog articles:
+
+<Steps>
 1. Create a new folder `src/queries/` and add a file named `get-articles.js`.
-2. Add the following query to this file to retrieve all articles:
 
+2. Add the following query to this file to retrieve all articles:
     ```js title="src/queries/get-articles.js"
 
     const GetArticles = `
@@ -90,7 +97,6 @@ You will fetch your data from Prepr by writing queries to interact with its Grap
     ```
 
 3. To display a linked list of your blog posts on a page, import and execute your query, including the necessary Prepr endpoint. You will then have access to all your posts titles and their slugs to render to the page. (In the next step, you will [create individual pages for your blog posts](#creating-individual-blog-post-pages).)
-
     ```astro title="src/pages/index.astro" ins={3-4, 6-8, 15-23}
     ---
     import Layout from '../layouts/Layout.astro';
@@ -117,7 +123,7 @@ You will fetch your data from Prepr by writing queries to interact with its Grap
       </ul>
     </Layout>
     ```
-
+</Steps>
 
 Your root directory should include these new files:
 
@@ -136,10 +142,9 @@ Your root directory should include these new files:
 
 To create a page for each blog post, you will execute a new GraphQL query on a [dynamic routing](/en/guides/routing/#server-ssr-mode) `.astro` page. This query will fetch a specific article by its slug and a new page will be created for each individual blog post.
 
+<Steps>
 1. Create a file called `get-article-by-slug.js` in the `queries` folder and add the following to query a specific article by its slug and return data such as the article `title` and `content`:
-
     ```js title="src/lib/queries/get-article-by-slug.js"
-
     const GetArticleBySlug = `
     query ($slug: String) {
        Article (slug: $slug) {
@@ -163,13 +168,12 @@ To create a page for each blog post, you will execute a new GraphQL query on a [
     export default GetArticleBySlug
     ```
 
-:::tip
-You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr.
-The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field).
-:::
+    :::tip
+    You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr.
+    The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field).
+    :::
 
 2. Inside the `src/pages` folder, create a file called `[…slug].astro`. Add the following code to import and execute the query from the previous step and display the retrieved article:
-
     ```astro title="src/pages/[...slug].astro"
     ---
     import Layout from '../layouts/Layout.astro';
@@ -202,6 +206,7 @@ The Article content is stored in a *Dynamic content field*. Check out the GraphQ
       </main>
     </Layout>
     ```
+</Steps>
 
 Your root directory should now include these new files: