Add Steps component to cosmic.mdx (withastro#8082)

Co-authored-by: Houston (Bot) <[email protected]> Co-authored-by: Sergio A. Arevalo Soria <[email protected]> Co-authored-by: Atharva <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
wpplumber · May 4, 2024 · 855efc9 · 855efc9
1 parent 1cd6903
commit 855efc9
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/content/docs/en/guides/cms/cosmic.mdx b/src/content/docs/en/guides/cms/cosmic.mdx
@@ -5,10 +5,10 @@ type: cms
 service: Cosmic
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-import Grid from '~/components/FluidGrid.astro'
-import Card from '~/components/ShowcaseCard.astro'
-
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Grid from '~/components/FluidGrid.astro';
+import Card from '~/components/ShowcaseCard.astro';
+import { Steps } from '@astrojs/starlight/components';
 
 [Cosmic](https://www.cosmicjs.com/) is a [headless CMS](https://www.cosmicjs.com/headless-cms) that provides an admin dashboard to manage content and an API that can integrate with a diverse range of frontend tools.
 
@@ -20,7 +20,6 @@ import Card from '~/components/ShowcaseCard.astro'
 
 ## Integrating Cosmic with Astro
 
-
 ### Installing Necessary Dependencies
 
 Add the [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk) to fetch data from your Cosmic Bucket.
@@ -54,6 +53,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY
 
 ## Fetching Data from Cosmic
 
+<Steps>
 1. Create a new file called `cosmic.js`. Place this file inside of the `src/lib` folder in your project.
 
 2. Add the following code to fetch data from Cosmic using the SDK and your environment variables. 
@@ -111,6 +111,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY
     ```
 
     [View source code for the Card component](https://github.com/cosmicjs/simple-astro-blog/blob/main/src/components/Card.astro)
+</Steps>
 
 ## Building a Blog with Astro and Cosmic
 
@@ -230,17 +231,25 @@ Under "Settings" > "webhooks", add the URL endpoint from Vercel and select the O
 
 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>
 
 ## Themes