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 strapi.mdx #8087

Merged
merged 1 commit into from
May 2, 2024
Merged

Add Steps component to strapi.mdx #8087

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
141 changes: 72 additions & 69 deletions src/content/docs/en/guides/cms/strapi.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

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

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

Expand Down
Loading