Skip to content

Commit

Permalink
Update 11ty.md with Strapi v4 (#909)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggirou
ggirou authored Jun 13, 2022
1 parent 14f369b commit 39e1123
Showing 1 changed file with 97 additions and 89 deletions.
186 changes: 97 additions & 89 deletions docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/developer-resources/c

# Getting Started with 11ty

!!!include(developer-docs/latest/developer-resources/content-api/snippets/integration-guide-not-updated.md)!!!

This integration guide is following the [Quick Start Guide](/developer-docs/latest/getting-started/quick-start.md). We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this [url](http://localhost:1337/api/restaurants).

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with [11ty](https://www.11ty.dev/) remains the same except that you will not fetch the same content.
Expand Down Expand Up @@ -70,7 +68,7 @@ npx @11ty/eleventy
</html>
```

- Create a `./src/index.md`, `./src/restaurant.md` and a `./src/categorie.md` file. They will define how you'll present the data.
- Create a `./src/index.md`, `./src/restaurant.md` and a `./src/category.md` file. They will define how you'll present the data.
- Create a `.eleventy.js` file containing the following (make sure to prefix the file's name with the dot):

```js
Expand Down Expand Up @@ -139,7 +137,7 @@ const { default: axios } = require('axios');

module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/restaurants');
const res = await axios.get('http://localhost:1337/api/restaurants?populate=*');
return res.data;
} catch (error) {
console.error(error);
Expand All @@ -151,37 +149,41 @@ module.exports = async () => {
:::response Example response

```json
[
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-07-31T11:37:16.964Z",
"updated_at": "2020-07-31T11:37:16.975Z",
"categories": [
{
"id": 1,
"name": "French Food",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
]
{
"data": [
{
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2022-05-23T09:41:46.762Z",
"updatedAt": "2022-05-23T09:44:32.424Z",
"publishedAt": "2022-05-23T09:44:32.423Z",
"categories": {
"data": [
{
"id": 2,
"attributes": {
"name": "Brunch",
"createdAt": "2022-05-23T09:42:16.764Z",
"updatedAt": "2022-05-23T09:44:21.534Z",
"publishedAt": "2022-05-23T09:44:21.532Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
```
:::
::::
Expand All @@ -195,7 +197,7 @@ const { default: axios } = require('axios');

module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/restaurants');
const res = await axios.get('http://localhost:1337/api/restaurants?populate=*');
return res.data;
} catch (error) {
console.error(error);
Expand All @@ -210,7 +212,7 @@ module.exports = async () => {
title: Restaurants
layout: default.liquid
pagination:
data: restaurants
data: restaurants.data
size: 100
alias: restaurants
---
Expand All @@ -219,7 +221,7 @@ pagination:

<ul>
{%- for restaurant in restaurants -%}
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.attributes.name }}</a></li>
{%- endfor -%}
</ul>
```
Expand All @@ -231,21 +233,21 @@ pagination:
title: Restaurant
layout: default.liquid
pagination:
data: restaurants
data: restaurants.data
size: 1
alias: restaurant
permalink: 'restaurants/{{ restaurant.id }}/'
permalink: 'restaurants/{{ restaurant.id }}/'
---

# {{ restaurant.name }}
# {{ restaurant.attributes.name }}

{{ restaurant.description }}
{{ restaurant.attributes.description }}

## Categories

{% for category in restaurant.categories %}
{% for category in restaurant.attributes.categories.data %}

<li><a href="/categories/{{ category.id }}/">{{ category.name }}</a></li>
<li><a href="/categories/{{ category.id }}/">{{ category.attributes.name }}</a></li>
{% endfor %}
```

Expand All @@ -261,7 +263,7 @@ const { default: axios } = require('axios');

module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/categories');
const res = await axios.get('http://localhost:1337/api/categories?populate=*');
return res.data;
} catch (error) {
console.error(error);
Expand All @@ -273,47 +275,53 @@ module.exports = async () => {
::: response Example response

```json
[
{
"id": 1,
"name": "French Food",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-08-28T11:43:23.578Z",
"updated_at": "2020-08-28T11:43:23.589Z",
"restaurants": [
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
{
"data": [
{
"id": 1,
"attributes": {
"name": "French Food",
"createdAt": "2022-05-23T09:42:04.679Z",
"updatedAt": "2022-05-23T09:44:25.309Z",
"publishedAt": "2022-05-23T09:44:25.308Z",
"restaurants": {
"data": []
}
}
},
"created_at": "2020-08-28T13:43:21.786Z",
"updated_at": "2020-08-28T13:43:21.786Z"
}
]
}
]
{
"id": 2,
"attributes": {
"name": "Brunch",
"createdAt": "2022-05-23T09:42:16.764Z",
"updatedAt": "2022-05-23T09:44:21.534Z",
"publishedAt": "2022-05-23T09:44:21.532Z",
"restaurants": {
"data": [
{
"id": 1,
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! **Restaurant Biscotte** offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"createdAt": "2022-05-23T09:41:46.762Z",
"updatedAt": "2022-05-23T09:44:32.424Z",
"publishedAt": "2022-05-23T09:44:32.423Z"
}
}
]
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}
```
:::

Expand All @@ -328,7 +336,7 @@ const { default: axios } = require('axios');

module.exports = async () => {
try {
const res = await axios.get('http://localhost:1337/api/categories');
const res = await axios.get('http://localhost:1337/api/categories?populate=*');
return res.data;
} catch (error) {
console.error(error);
Expand All @@ -343,7 +351,7 @@ module.exports = async () => {
title: Category
layout: default.liquid
pagination:
data: categories
data: categories.data
size: 1
alias: category
permalink: 'categories/{{ category.id }}/'
Expand All @@ -353,9 +361,9 @@ permalink: 'categories/{{ category.id }}/'

## Restaurants

{% for restaurant in category.restaurants %}
{% for restaurant in category.attributes.restaurants.data %}

<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.attributes.name }}</a></li>
{% endfor %}
```

Expand Down

0 comments on commit 39e1123

Please sign in to comment.