Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Steps component to cosmic.mdx #8082

Merged
merged 1 commit into from
May 2, 2024
+14 −5
Merged

Add Steps component to cosmic.mdx #8082

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions src/content/docs/en/guides/cms/cosmic.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
Loading