strapi · alexandrebodin · Sep 30, 2020 · Aug 21, 2020 · Aug 26, 2020 · Aug 26, 2020
diff --git a/docs/.vuepress/theme/global-components/IntegrationLinks.vue b/docs/.vuepress/theme/global-components/IntegrationLinks.vue
diff --git a/docs/v3.x/getting-started/11ty.md b/docs/v3.x/getting-started/11ty.md
@@ -0,0 +1,354 @@
+# 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/).