mirror of
https://github.com/strapi/strapi.git
synced 2025-07-23 17:10:08 +00:00
34f143827c
* 5 new integrations * More integrations Signed-off-by: Maxime Castres <mcastres@student.42.fr> * AUpdate Nuxt.js --amend --signoff * Add 11ty Signed-off-by: Maxime Castres <mcastres@student.42.fr> * Correction after soupette's review * Correct python file * Alex review * Alex review 2: replace console.error to log
355 lines
7.6 KiB
Markdown
355 lines
7.6 KiB
Markdown
# Getting Started with 11ty
|
|
|
|
This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants).
|
|
|
|
If you haven't gone through the getting started 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.
|
|
|
|
### Create an 11ty app
|
|
|
|
Create a `package.json` file, install and save Eleventy into your project.
|
|
|
|
:::: tabs
|
|
|
|
::: tab npm
|
|
|
|
```bash
|
|
npm init -y
|
|
npm install @11ty/eleventy
|
|
```
|
|
|
|
:::
|
|
|
|
::: tab yarn
|
|
|
|
```bash
|
|
yarn init -y
|
|
yarn add @11ty/eleventy
|
|
```
|
|
|
|
:::
|
|
|
|
::::
|
|
|
|
Make sure installation went ok:
|
|
|
|
```bash
|
|
npx @11ty/eleventy
|
|
# Wrote 0 files in 0.02 seconds (v0.11.0)
|
|
```
|
|
|
|
### Configure 11ty
|
|
|
|
11ty do not create any file structure for you. It's up to you to do it.
|
|
|
|
- Create a `./src/_data` folder containing a `categories.js` and a `restaurants.js` file. They will be used to fetch your content from Strapi.
|
|
- Create a `./src/_templates` folder containing a `default.liquid` file. It will be the default template of your project.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>
|
|
{{ renderData.title }}
|
|
</title>
|
|
</head>
|
|
|
|
<body>
|
|
<a href="/">Home</a>
|
|
{{ content }}
|
|
</body>
|
|
</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 `.eleventy.js` file containing the following (make sure to prefix the file's name with the dot):
|
|
|
|
```js
|
|
const HtmlMin = require('html-minifier');
|
|
const ErrorOverlay = require('eleventy-plugin-error-overlay');
|
|
|
|
module.exports = eleventyConfig => {
|
|
eleventyConfig.setTemplateFormats(['md']);
|
|
eleventyConfig.addPlugin(ErrorOverlay);
|
|
eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
|
|
if (outputPath.endsWith('.html')) {
|
|
let minified = HtmlMin.minify(content, {
|
|
useShortDoctype: true,
|
|
removeComments: true,
|
|
collapseWhitespace: true,
|
|
});
|
|
return minified;
|
|
}
|
|
return content;
|
|
});
|
|
return {
|
|
dir: {
|
|
input: 'src',
|
|
output: 'dist',
|
|
includes: '_templates',
|
|
data: '_data',
|
|
},
|
|
jsDataFileSuffix: '.data',
|
|
};
|
|
};
|
|
```
|
|
|
|
- Finally, add the following packages to your application:
|
|
|
|
:::: tabs
|
|
|
|
::: tab npm
|
|
|
|
```bash
|
|
npm install axios eleventy-plugin-error-overlay html-minifier
|
|
```
|
|
|
|
:::
|
|
|
|
::: tab yarn
|
|
|
|
```bash
|
|
yarn add axios eleventy-plugin-error-overlay html-minifier
|
|
```
|
|
|
|
:::
|
|
|
|
::::
|
|
|
|
### GET Request your collection type
|
|
|
|
Execute a `GET` request on the `restaurant` Collection Type in order to fetch all your restaurants.
|
|
|
|
Be sure that you activated the `find` permission for the `restaurant` Collection Type.
|
|
|
|
_Request_
|
|
|
|
```js
|
|
const { default: axios } = require('axios');
|
|
|
|
module.exports = async () => {
|
|
try {
|
|
const res = await axios.get('http://localhost:1337/restaurants');
|
|
return res.data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
```
|
|
|
|
_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"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
```
|
|
|
|
### Example
|
|
|
|
`./src/_data/restaurants.js`
|
|
|
|
```js
|
|
const { default: axios } = require('axios');
|
|
|
|
module.exports = async () => {
|
|
try {
|
|
const res = await axios.get('http://localhost:1337/restaurants');
|
|
return res.data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
```
|
|
|
|
`./src/index.md`
|
|
|
|
```md
|
|
---
|
|
title: Restaurants
|
|
layout: default.liquid
|
|
pagination:
|
|
data: restaurants
|
|
size: 100
|
|
alias: restaurants
|
|
---
|
|
|
|
# Restaurants
|
|
|
|
<ul>
|
|
{%- for restaurant in restaurants -%}
|
|
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
```
|
|
|
|
`./src/restaurant.md`
|
|
|
|
```md
|
|
---
|
|
title: Restaurant
|
|
layout: default.liquid
|
|
pagination:
|
|
data: restaurants
|
|
size: 1
|
|
alias: restaurant
|
|
permalink: 'restaurants/{{ restaurant.id }}/'
|
|
---
|
|
|
|
# {{ restaurant.name }}
|
|
|
|
{{ restaurant.description }}
|
|
|
|
## Categories
|
|
|
|
{% for category in restaurant.categories %}
|
|
|
|
<li><a href="/categories/{{ category.id }}/">{{ category.name }}</a></li>
|
|
{% endfor %}
|
|
```
|
|
|
|
Execute a `GET` request on the `category` Collection Type in order to fetch a specific category with all the associated restaurants.
|
|
|
|
Be sure that you activated the `find` permission for the `category` Collection Type.
|
|
|
|
_Request_
|
|
|
|
```js
|
|
const { default: axios } = require('axios');
|
|
|
|
module.exports = async () => {
|
|
try {
|
|
const res = await axios.get('http://localhost:1337/categories');
|
|
return res.data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
```
|
|
|
|
_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
|
|
},
|
|
"created_at": "2020-08-28T13:43:21.786Z",
|
|
"updated_at": "2020-08-28T13:43:21.786Z"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
```
|
|
|
|
### Example
|
|
|
|
`./src/_data/categories.js`
|
|
|
|
```js
|
|
const { default: axios } = require('axios');
|
|
|
|
module.exports = async () => {
|
|
try {
|
|
const res = await axios.get('http://localhost:1337/categories');
|
|
return res.data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
```
|
|
|
|
`./src/category.md`
|
|
|
|
```md
|
|
---
|
|
title: Category
|
|
layout: default.liquid
|
|
pagination:
|
|
data: categories
|
|
size: 1
|
|
alias: category
|
|
permalink: 'categories/{{ category.id }}/'
|
|
---
|
|
|
|
# {{ category.name }}
|
|
|
|
## Restaurants
|
|
|
|
{% for restaurant in category.restaurants %}
|
|
|
|
<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.name }}</a></li>
|
|
{% endfor %}
|
|
```
|
|
|
|
You can find your restaurants and categories by browsing `http://localhost:8081/restaurants/<id-of-restaurant>` and `http://localhost:8081/categories/<id-of-category>`.
|
|
|
|
## User Stories
|
|
|
|
- How [Paradigma Digital](https://strapi.io/user-stories/paradigma-digital-brand) switched from Wordpress to Strapi and Eleventy.
|
|
|
|
## Conclusion
|
|
|
|
Here is how to request your Collection Types in Strapi using 11ty.
|
|
Learn more about [11ty](https://www.11ty.dev/).
|