From b87ae88ea8a11c43289fbf53cc709c4eb51430dc Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:53:01 -0300 Subject: [PATCH] Add Steps component to `cosmic.mdx` (#8082) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/cosmic.mdx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/cms/cosmic.mdx b/src/content/docs/en/guides/cms/cosmic.mdx index 9ec9a8fa645d5..d1c8a7279363f 100644 --- 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 + 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) + ## 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: + 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. + ##### Vercel To set up a webhook in Vercel: + 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. + ## Themes