Add Steps component to strapi.mdx (#8087)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sergio A. Arevalo Soria <[email protected]> Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Atharva <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · May 2, 2024 · 3f15a02 · 3f15a02
1 parent b132694
commit 3f15a02
Showing 1 changed file with 72 additions and 69 deletions.
diff --git a/src/content/docs/en/guides/cms/strapi.mdx b/src/content/docs/en/guides/cms/strapi.mdx
@@ -6,7 +6,7 @@ service: Strapi
 stub: false
 i18nReady: true
 ---
-
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
@@ -146,78 +146,78 @@ You can modify this interface, or create multiple interfaces, to correspond to y
 
 ### Displaying a list of articles
 
+<Steps>
 1. Update your home page `src/pages/index.astro` to display a list of blog posts, each with a description and a link to its own page.
 
 2. Import the wrapper function and the interface. Add the following API call to fetch your articles and return a list:
-
-  ```astro title="src/pages/index.astro"
-  ---
-  import fetchApi from '../lib/strapi';
-  import type Article from '../interfaces/article';
-
-  const articles = await fetchApi<Article[]>({
-    endpoint: 'articles', // the content type to fetch
-    wrappedByKey: 'data', // the key to unwrap the response
-  });
-  ---
-  ```
-
-  The API call requests data from `http://localhost:1337/api/articles` and returns `articles`: an array of json objects representing your data:
-
-  ```json
-  [
-    {
-      id: 1,
-      attributes: {
-        title: "What's inside a Black Hole",
-        description: "Maybe the answer is in this article, or not...",
-        content: "Well, we don't know yet...",
-        slug: "what-s-inside-a-black-hole",
-        createdAt: "2023-05-28T13:19:46.421Z",
-        updatedAt: "2023-05-28T13:19:46.421Z",
-        publishedAt: "2023-05-28T13:19:45.826Z"
-      }
-    },
-    // ...
-  ]
-  ```
+    ```astro title="src/pages/index.astro"
+    ---
+    import fetchApi from '../lib/strapi';
+    import type Article from '../interfaces/article';
+
+    const articles = await fetchApi<Article[]>({
+      endpoint: 'articles', // the content type to fetch
+      wrappedByKey: 'data', // the key to unwrap the response
+    });
+    ---
+    ```
+
+    The API call requests data from `http://localhost:1337/api/articles` and returns `articles`: an array of json objects representing your data:
+
+    ```json
+    [
+      {
+        id: 1,
+        attributes: {
+          title: "What's inside a Black Hole",
+          description: "Maybe the answer is in this article, or not...",
+          content: "Well, we don't know yet...",
+          slug: "what-s-inside-a-black-hole",
+          createdAt: "2023-05-28T13:19:46.421Z",
+          updatedAt: "2023-05-28T13:19:46.421Z",
+          publishedAt: "2023-05-28T13:19:45.826Z"
+        }
+      },
+      // ...
+    ]
+    ```
 
 3. Using data from the `articles` array returned by the API, display your Strapi blog posts in a list. These posts will link to their own individual pages, which you will create in the next step.
-
-  ```astro title="src/pages/index.astro"
-  ---
-  import fetchApi from '../lib/strapi';
-  import type Article from '../interfaces/article';
-
-  const articles = await fetchApi<Article[]>({
-    endpoint: 'articles?populate=image',
-    wrappedByKey: 'data',
-  });
-  ---
-
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <title>Strapi & Astro</title>
-    </head>
-
-    <body>
-      <main>
-        <ul>
-          {
-            articles.map((article) => (
-              <li>
-                <a href={`/blog/${article.attributes.slug}/`}>
-                  {article.attributes.title}
-                </a>
-              </li>
-            ))
-          }
-        </ul>
-      </main>
-    </body>
-  </html>
-  ```
+    ```astro title="src/pages/index.astro"
+    ---
+    import fetchApi from '../lib/strapi';
+    import type Article from '../interfaces/article';
+
+    const articles = await fetchApi<Article[]>({
+      endpoint: 'articles?populate=image',
+      wrappedByKey: 'data',
+    });
+    ---
+
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <title>Strapi & Astro</title>
+      </head>
+
+      <body>
+        <main>
+          <ul>
+            {
+              articles.map((article) => (
+                <li>
+                  <a href={`/blog/${article.attributes.slug}/`}>
+                    {article.attributes.title}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </main>
+      </body>
+    </html>
+    ```
+</Steps>
 
 ### Generating article pages
 
@@ -267,7 +267,6 @@ const article = Astro.props;
 
 Create the template for each page using the properties of each post object.
 
-
 ```astro title="src/pages/blog/[slug].astro ins={21-43}
 ---
 import fetchApi from '../../lib/strapi';
@@ -401,21 +400,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 Strapi