diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fea4b1c151..66fe2af414 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -42,8 +42,6 @@ The core team will review your pull request and will either merge it, request ch ### Contribution Workflow - - #### Setting up 1. Fork the `documentation` repository. @@ -87,7 +85,7 @@ The core team will review your pull request and will either merge it, request ch ``` #### Writing -We can't provide you specific procedures with step-by-step instructions to write technical documentation. But if you have any question or need help, do feel free to reach us through [our forum](https://forum.strapi.io/). +We can't provide you specific procedures with step-by-step instructions to write technical documentation. But our ["12 Rules of Technical Writing"](https://handbook.strapi.io/user-success-manual/12-rules-of-technical-writing) and [style guide](https://handbook.strapi.io/user-success-manual/strapi-documentation-style-guide) should help you get started. If you have any question or need help, do feel free to reach us through [our forum](https://forum.strapi.io/). #### Sharing & reviewing diff --git a/README.md b/README.md index 7289f36d08..f31f44b45f 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Strapi is a free and open-source headless CMS delivering your content anywhere y The following are required if you are submitting pull requests to the documentation. For more information on how to contribute please see our [contribution guide](./CONTRIBUTING.md) -- NodeJS >= 10.16 <=12 +- NodeJS >=12.x <=14.x - NPM >= 6.x - Yarn >= 1.22.x diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 1c8265b8e3..34059aa47b 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -48,8 +48,7 @@ const sidebar = { children: [ { title: 'Hosting Provider Guides', - path: - '/developer-docs/latest/setup-deployment-guides/deployment.html#hosting-provider-guides', + path: '/developer-docs/latest/setup-deployment-guides/deployment.html#hosting-provider-guides', collapsable: true, children: [ [ @@ -93,8 +92,7 @@ const sidebar = { }, { title: 'Optional Software Guides', - path: - '/developer-docs/latest/setup-deployment-guides/deployment.html#optional-software-guides', + path: '/developer-docs/latest/setup-deployment-guides/deployment.html#optional-software-guides', collapsable: true, children: [ [ @@ -380,27 +378,82 @@ const checklinksIgnoredFiles = [ './developer-docs/latest/update-migration-guides/migration-guides/migration-guide-beta.20-to-3.0.0.md', // line 93 ]; +const plugins = [ + ['vuepress-plugin-element-tabs', {}], + ['check-md', { + ignore: checklinksIgnoredFiles, + }], + ['seo', { + siteTitle: (_, $site) => $site.title, + title: $page => $page.title, + }], + ['vuepress-plugin-code-copy', { + color: '#ffffff', + successText: 'Copied to clipboard!', + }], + ['@vuepress/back-to-top', {}], + ['vuepress-plugin-container', { + type: 'callout', + defaultTitle: '' + }], + ['vuepress-plugin-container', { + type: 'strapi', + defaultTitle: '', + before: info => `

🤓 ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'tip', + before: info => `

💡 ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'note', + before: info => `

✏️ ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'caution', + before: info => `

✋ ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'warning', + before: info => `

️❗️ ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'prerequisites', + defaultTitle: 'PREREQUISITES' + }], + ['vuepress-plugin-container', { + type: 'api-call', + defaultTitle: '' + }], + ['vuepress-plugin-container', { + type: 'request', + defaultTitle: 'Request' + }], + ['vuepress-plugin-container', { + type: 'response', + defaultTitle: 'Response' + }] +]; + +const checkLegacy = () => { + if (process.env.DEPLOY_ENV == 'legacy') { + return '/documentation/'; + } else { + return '/'; + } +}; + module.exports = { title: '', port: 8080, description: 'The headless CMS developers love.', - base: '/documentation/', - plugins: { - '@vuepress/medium-zoom': {}, - 'vuepress-plugin-element-tabs': {}, - 'check-md': { - ignore: checklinksIgnoredFiles, - }, - seo: { - siteTitle: (_, $site) => $site.title, - title: $page => $page.title, - }, - 'vuepress-plugin-code-copy': { - color: '#ffffff', - successText: 'Copied to clipboard!', - }, - '@vuepress/back-to-top': {}, - }, + base: checkLegacy(), + plugins: plugins, head: [ [ 'link', @@ -503,6 +556,10 @@ module.exports = { themeConfig: { logo: '/assets/logo.png', nav: [ + { + text: 'Resource Center', + link: 'https://strapi.io/resource-center', + }, { text: 'Documentation', items: [ @@ -544,13 +601,11 @@ module.exports = { }, { text: 'Content-Types Builder', - link: - '/user-docs/latest/content-types-builder/introduction-to-content-types-builder.html', + link: '/user-docs/latest/content-types-builder/introduction-to-content-types-builder.html', }, { text: 'Users, Roles, and Permissions', - link: - '/user-docs/latest/users-roles-permissions/introduction-to-users-roles-permissions.html', + link: '/user-docs/latest/users-roles-permissions/introduction-to-users-roles-permissions.html', }, { text: 'Plugins', @@ -592,8 +647,8 @@ module.exports = { link: 'https://forum.strapi.io', }, { - text: 'Slack', - link: 'https://slack.strapi.io', + text: 'Discord', + link: 'https://discord.strapi.io', }, { text: 'Awesome-Strapi', @@ -616,6 +671,10 @@ module.exports = { }, ], }, + { + text: "We're hiring!", + link: 'https://strapi.io/careers#open-positions', + }, ], repo: 'strapi/documentation', docsDir: 'docs', @@ -634,4 +693,10 @@ module.exports = { '/user-docs/latest/': sidebar.user, }, }, + markdown: { + extendMarkdown: md => { + // use more markdown-it plugins! + md.use(require('markdown-it-include')) + } + } }; diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl index 6e34e9968d..10b26c1a7d 100644 --- a/docs/.vuepress/styles/index.styl +++ b/docs/.vuepress/styles/index.styl @@ -2,4 +2,6 @@ color: $accentColor !important .el-tabs__item:not(.is-disabled):hover - color: $accentColor !important \ No newline at end of file + color: $accentColor !important + +@import "strapi-custom-blocks.styl" diff --git a/docs/.vuepress/styles/strapi-custom-blocks.styl b/docs/.vuepress/styles/strapi-custom-blocks.styl new file mode 100644 index 0000000000..3cba6c7d98 --- /dev/null +++ b/docs/.vuepress/styles/strapi-custom-blocks.styl @@ -0,0 +1,197 @@ +.el-tabs__active-bar + background-color: #007eff !important + +.custom-block + /** + * CALLOUTS + */ + .custom-block-title + font-weight 600 + margin-bottom -0.4rem + &.callout + &.callout-alt + &.strapi + &.prerequisites + &.note + &.tip + &.warning + &.danger + &.caution + padding .1rem 1.5rem + margin-top 2rem + margin-bottom 2rem + border-left-width: .25rem + border-left-style solid + &.strapi + background-color rgba(129,107,250, .05) + border-color rgb(129,107,250) + .custom-block-title + color #816bfa + font-weight 700 + p, li + color #2c3e50 + a + color #007eff + &.callout + &.callout-alt + &.prerequisites + background-color #f8f8f8 + border-color #bbbbba + &.callout-alt + border-radius: 10px + background-color: #eff5f7 + border: none + &.note + background-color #f4fcff + border-color #0193C2 + &.caution + border-color #E7C000 + background-color rgba(255,229,100,.3) + color #6b5900 + .custom-block-title + color #B29400 + a + color #2c3e50 + &.warning + border-color #cc0000 + background-color rgb(255, 230, 230) + color #4d0000 + .custom-block-title + color #900 + a + color #2c3e50 + &.tip + background-color #EFFDF6 + /** + * API CALLS + */ + &.api-call + padding: 0 + border-radius: 12px + // margin: 2rem 0 2rem + @media (min-width: 1536px) + display: flex + margin: 0 -12rem 2rem 0 + align-items: stretch + &.request + background-color: #666687 + padding: 0 1rem 1rem + border-radius: 12px + font-size: 100% + color:#F6F6F9 + .custom-block-title + margin-left: -1rem + margin-right: -1rem + margin-top: 0 + border-radius: 12px 12px 0 0 + padding: .5rem 1rem + font-weight: 700 + background-color: #32324D + color: #F6F6F9 + font-size: 90%; + .custom-block-title+p + padding-top: 1rem + p, ul, ol + color: #2c3e50 + color: rgba(241,251,255,.8) + p + padding-left: 1rem + ul, ol + padding-left: 3rem + [class^="language-"] + background-color: transparent + font-size: 110% + &::before + color: #EAEAEF + pre + padding: 1rem 0 0 1rem + code + color: #F6F6F9 + background-color: #212134 + .token + color: #F6F6F9 // catch-all for undefined colors + &.punctuation + color: #d3d3d3 + &.operator + &.property + color: #F6F6F9 + &.string + &.attr-name + &.function + color: #B6FFB5 + &.number + &.keyword + color: #FDED9B + &.comment + color: #d9d9d9 + &.response + background-color: #DCDCE4 + margin-top: 2rem + padding: 0 1rem 1rem + border-radius: 12px + font-size: 100% + color: #666687 + .extra-class::before + color: #666687 + .custom-block-title + background-color: #C0C0CF + color: #32324D + border-radius: 12px 12px 0 0 + margin-left: -1rem + margin-right: -1rem + padding: .5rem 1rem + margin-top: 0 + font-weight: 700 + font-size: 90%; + margin-bottom: .5rem + [class^="language-"] + background-color: transparent + font-size: 110% + &::before + color: #666687 + pre + padding: 1rem 0 0 1rem + code + color: #666687 !important + .token + color: #666687 // catch-all for undefined colors + &.punctuation + &.operator + &.property + color: #666687 + &.string + color: #2B7732 + &.number + color: #B7322A + &.comment + color: #8585b2 + &.request + &.response + margin-top: 2rem + .extra-class + font-size: 90% + border-radius: 6px 0 6px 0 + pre + // white-space: pre-wrap + word-break: break-word + margin-bottom: 0 + + &.api-call + > .request + > .response + @media (min-width: 1536px) + flex: 0 0 42% + max-width: 42% + > .request + @media (min-width: 1536px) + border-radius: 12px 0 0 12px + .custom-block-title + border-radius: 12px 0 0 0 + .response + @media (min-width: 1536px) + border-radius: 0 12px 12px 0 + .custom-block-title + border-radius: 0 12px 0 0 + +.custom-block.details + color rgb(44, 62, 80) diff --git a/docs/.vuepress/theme/global-components/BronzeBadge.vue b/docs/.vuepress/theme/global-components/BronzeBadge.vue index b02faa2ec2..324a389b04 100644 --- a/docs/.vuepress/theme/global-components/BronzeBadge.vue +++ b/docs/.vuepress/theme/global-components/BronzeBadge.vue @@ -9,7 +9,7 @@ export default { text: { type: String, default: 'Bronze', - required: true + // required: true // to suppress Vue warnings }, withLinkIcon: { type: Boolean, diff --git a/docs/.vuepress/theme/global-components/CustomBadge.vue b/docs/.vuepress/theme/global-components/CustomBadge.vue index 7da0253699..789e3035c2 100644 --- a/docs/.vuepress/theme/global-components/CustomBadge.vue +++ b/docs/.vuepress/theme/global-components/CustomBadge.vue @@ -12,7 +12,7 @@ export default { text: { type: String, default: 'Badge', - required: true + // required: true // to suppress Vue warnings }, withLinkIcon: { type: Boolean, diff --git a/docs/.vuepress/theme/global-components/GoldBadge.vue b/docs/.vuepress/theme/global-components/GoldBadge.vue index 430682ba0e..5c9f4065b5 100644 --- a/docs/.vuepress/theme/global-components/GoldBadge.vue +++ b/docs/.vuepress/theme/global-components/GoldBadge.vue @@ -9,7 +9,7 @@ export default { text: { type: String, default: 'Gold', - required: true + // required: true // to suppress Vue warnings }, withLinkIcon: { type: Boolean, diff --git a/docs/.vuepress/theme/global-components/SilverBadge.vue b/docs/.vuepress/theme/global-components/SilverBadge.vue index aed031cc6d..364a765ba0 100644 --- a/docs/.vuepress/theme/global-components/SilverBadge.vue +++ b/docs/.vuepress/theme/global-components/SilverBadge.vue @@ -9,7 +9,7 @@ export default { text: { type: String, default: 'Silver', - required: true + // required: true // to suppress Vue warnings }, withLinkIcon: { type: Boolean, diff --git a/docs/developer-docs/latest/developer-resources/cli/CLI.md b/docs/developer-docs/latest/developer-resources/cli/CLI.md index dc90034510..9b2c6a1882 100644 --- a/docs/developer-docs/latest/developer-resources/cli/CLI.md +++ b/docs/developer-docs/latest/developer-resources/cli/CLI.md @@ -59,7 +59,7 @@ options: [--no-build |--watch-admin |--browser ] - **strapi develop --watch-admin --browser 'google chrome'**
Starts your application with the autoReload enabled and the front-end development server. It allows you to customize the administration panel. Provide a browser name to use instead of the default one, `false` means stop opening the browser. -::: tip +:::warning You should never use this command to run a Strapi application in production. ::: @@ -120,7 +120,7 @@ Options: All these examples are equivalent. -::: warning +:::caution When configuring your application you often enter credentials for third party services (e.g authentication providers). Be aware that those credentials will also be dumped into the output of this command. In case of doubt, you should avoid committing the dump file into a versioning system. Here are some methods you can explore: @@ -372,7 +372,7 @@ strapi install Example: `strapi install graphql` will install the plugin `strapi-plugin-graphql` -::: warning +:::caution Some plugins have admin panel integrations, your admin panel might have to be rebuilt. This can take some time. ::: @@ -396,7 +396,7 @@ options [--delete-files] Example: `strapi uninstall graphql --delete-files` will remove the plugin `strapi-plugin-graphql` and all the files in `./extensions/graphql` -::: warning +:::caution Some plugins have admin panel integrations, your admin panel might have to be rebuilt. This can take some time. ::: diff --git a/docs/developer-docs/latest/developer-resources/content-api/content-api.md b/docs/developer-docs/latest/developer-resources/content-api/content-api.md index 80d26632d1..3798c2437e 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/content-api.md +++ b/docs/developer-docs/latest/developer-resources/content-api/content-api.md @@ -10,8 +10,8 @@ sidebarDepth: 3 When you create a `Content Type` you will have a certain number of **REST API endpoints** available to interact with it. -::: warning -Components don't have API endpoints +:::caution +Components don't have API endpoints. ::: As an **example**, let's consider the following models: @@ -29,7 +29,7 @@ As an **example**, let's consider the following models: --- -:::: tabs +:::: tabs card ::: tab Content Types @@ -117,7 +117,7 @@ Here is the list of endpoints generated for each of your **Content Types**. -:::: tabs +:::: tabs card ::: tab Collection Type @@ -158,7 +158,7 @@ Here are some Content Type examples ##### Single Types -:::: tabs +:::: tabs card ::: tab Homepage @@ -196,7 +196,7 @@ Here are some Content Type examples ##### Collection Types -:::: tabs +:::: tabs card ::: tab Restaurant @@ -299,21 +299,15 @@ Here are some Content Type examples Returns entries matching the query filters. You can read more about parameters [here](#api-parameters). -:::: tabs - -::: tab Request +:::: api-call -**Example request** +::: request Example request -```js -GET http://localhost:1337/restaurants -``` +`GET http://localhost:1337/restaurants` ::: -::: tab Response - -**Example response** +::: response Example response ```json [ @@ -382,21 +376,15 @@ GET http://localhost:1337/restaurants Returns an entry by id. -:::: tabs +:::: api-call -::: tab Request +::: request Example request -**Example request** - -```js -GET http://localhost:1337/restaurants/1 -``` +`GET http://localhost:1337/restaurants/1` ::: -::: tab Response - -**Example response** +::: response Example response ```json { @@ -463,25 +451,17 @@ GET http://localhost:1337/restaurants/1 Returns the count of entries matching the query filters. You can read more about parameters [here](#api-parameters). -:::: tabs - -::: tab Request +:::: api-call -**Example request** +::: request Example request -```js -GET http://localhost:1337/restaurants/count -``` +`GET http://localhost:1337/restaurants/count` ::: -::: tab Response +::: response Example response -**Example response** - -``` -1 -``` +`1` ::: @@ -493,15 +473,11 @@ Creates an entry and returns its value. If the [Internationalization (i18n) plugin](/developer-docs/latest/development/plugins/i18n.md) is installed, it's possible to use POST requests to the Content API to [create localized entries](/developer-docs/latest/development/plugins/i18n.md#creating-a-new-localized-entry). -:::: tabs - -::: tab Request +:::: api-call -**Example request** +::: request Example request -```js -POST http://localhost:1337/restaurants -``` +`POST http://localhost:1337/restaurants` ```json { @@ -532,9 +508,7 @@ POST http://localhost:1337/restaurants ::: -::: tab Response - -**Example response** +::: response Example response ```json { @@ -603,19 +577,15 @@ POST http://localhost:1337/restaurants Partially updates an entry by `id` and returns its value. Fields that aren't sent in the query are not changed in the database. Send a `null` value if you want to clear them. -::: tip NOTE +:::note It's currently not possible to [update the locale of an entry](/developer-docs/latest/development/plugins/i18n.md#updating-an-entry). ::: -:::: tabs +:::: api-call -::: tab Request +::: request Example request -**Example request** - -```js -PUT http://localhost:1337/restaurants/1 -``` +`PUT http://localhost:1337/restaurants/1` ```json { @@ -655,9 +625,7 @@ PUT http://localhost:1337/restaurants/1 ::: -::: tab Response - -**Example response** +::: response Example response ```json { @@ -730,21 +698,15 @@ PUT http://localhost:1337/restaurants/1 Deletes an entry by id and returns its value. -:::: tabs +:::: api-call -::: tab Request +::: request Example request -**Example request** - -```js -DELETE http://localhost:1337/restaurants/1 -``` +`DELETE http://localhost:1337/restaurants/1` ::: -::: tab Response - -**Example response** +::: response Example response ```json { @@ -819,7 +781,7 @@ DELETE http://localhost:1337/restaurants/1 -::: warning +:::caution By default, the filters can only be used from `find` and `count` endpoints generated by the Content-Types Builder and the [CLI](../cli/CLI.md). ::: @@ -861,27 +823,35 @@ Filters are used as a suffix of a field name: ##### Find users having `John` as first name. +:::request Example requests: Find users having 'John' as first name `GET /users?firstName=John` -or +
or
`GET /users?firstName_eq=John` +::: -##### Find restaurants having a price equal or greater than `3`. +##### Find restaurants having a price equal or greater than `3` +:::request Example request: Find restaurants having a price equal or greater than `3` `GET /restaurants?price_gte=3` +::: -##### Find multiple restaurant with id 3, 6, 8. +##### Find multiple restaurant with id 3, 6, 8 +:::request Example request: Find multiple restaurant with id 3, 6, 8 `GET /restaurants?id_in=3&id_in=6&id_in=8` +::: ##### Using `_where` +:::request Example requests: Using the _where filter `GET /restaurants?_where[price_gte]=3` `GET /restaurants?_where[0][price_gte]=3&[0][price_lte]=7` +::: #### Complex queries -::: tip NOTE +:::note `OR` and `AND` operations are available starting from v3.1.0 ::: @@ -891,7 +861,7 @@ We are taking advantage of the capability of `qs` to parse nested objects to cre This will give you full power to create complex queries with logical `AND` and `OR` operations. -::: tip NOTE +:::caution We strongly recommend using `qs` directly to generate complex queries instead of creating them manually. ::: @@ -955,7 +925,9 @@ The query engine implicitly uses the `OR` operation when you pass an array of va Restaurants that have 1 or 2 `stars`: +:::request Example request: Restaurants that have 1 or 2 `stars` `GET /restaurants?stars=1&stars=2` +::: or @@ -966,7 +938,7 @@ await request(`/restaurant?${query}`); // GET /restaurants?_where[stars][0]=1&_where[stars][1]=2 ``` -::: tip NOTE +:::note When using the `in` and `nin` filters the array is not transformed into a OR. ::: @@ -1006,14 +978,16 @@ await request(`/restaurants?${query}`); // GET /restaurants?_where[_or][0][0][stars]=2&_where[_or][0][1][pricing_lt]=80&_where[_or][1][0][stars]=1&_where[_or][1][1][categories.name]=French ``` -::: warning -When creating nested queries, make sure the depth is less than 20 or the query string parsing will fail for now. +:::caution +When creating nested queries, make sure the depth is less than 20 or the query string parsing will fail. ::: #### Deep filtering -Find restaurants owned by a chef who belongs to a restaurant with star equal to 5 + +:::request Example request: Find restaurants owned by a chef who belongs to a restaurant with star equal to 5 `GET /restaurants?chef.restaurant.star=5` +::: ::: warning Querying your API with deep filters may cause performance issues. @@ -1030,25 +1004,27 @@ To achieve this, there are three options: - Use [GraphQL](/developer-docs/latest/development/plugins/graphql.md#query-api). ::: -::: warning -This feature isn't available for **polymorphic** relations. This relation type is used in `media`, `component` and `dynamic zone` fields. +:::caution +This feature isn't available for polymorphic relations. This relation type is used in `media`, `component` and `dynamic zone` fields. ::: ### Sort Sort according to a specific field. -#### Example +#### Examples -##### Sort users by email. +:::request Example requests: Sort users by email +`GET /users?_sort=email:ASC` to sort by ascending order -- ASC: `GET /users?_sort=email:ASC` -- DESC: `GET /users?_sort=email:DESC` +`GET /users?_sort=email:DESC` to sort by descending order +::: -##### Sorting on multiple fields +:::request Example requests: Sorting on multiple fields +`GET /users?_sort=email:ASC,dateField:DESC` -- `GET /users?_sort=email:asc,dateField:desc` -- `GET /users?_sort=email:DESC,username:ASC` +`GET /users?_sort=email:DESC,username:ASC` +::: ### Limit @@ -1060,7 +1036,9 @@ The default limit is `100` ##### Limit the result length to 30. +:::request Example request: Limit the result length to 30. `GET /users?_limit=30` +::: You can require the full data set by passing a limit equal to `-1`. @@ -1070,13 +1048,15 @@ Skip a specific number of entries (especially useful for pagination). #### Example -##### Get the second page of results. +##### Get the second page of results +::: request Example request: Get the second page of results `GET /users?_start=10&_limit=10` +::: ### Publication State -::: tip NOTE +:::note This parameter can only be used on models with the **Draft & Publish** feature activated ::: @@ -1091,15 +1071,21 @@ Handled states are: ##### Get published articles +:::request Example requests: Get published articles `GET /articles` -OR + +or + `GET /articles?_publicationState=live` +::: ##### Get both published and draft articles +:::request Example request: Get both published and draft articles `GET /articles?_publicationState=preview` +::: -::: tip NOTE +:::note If you only want to retrieve your draft entries, you can combine the `preview` mode and the `published_at` field. `GET /articles?_publicationState=preview&published_at_null=true` ::: diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md index 5909a0236b..fb10c071a6 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/11ty.md @@ -13,7 +13,7 @@ If you haven't gone through the Quick Start Guide, the way you request a Strapi Create a `package.json` file, install and save Eleventy into your project. -:::: tabs +:::: tabs card ::: tab npm @@ -44,7 +44,7 @@ npx @11ty/eleventy ## Configure 11ty -11ty do not create any file structure for you. It's up to you to do it. +11ty does 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. @@ -102,7 +102,7 @@ module.exports = eleventyConfig => { - Finally, add the following packages to your application: -:::: tabs +:::: tabs card ::: tab npm @@ -128,7 +128,8 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```js const { default: axios } = require('axios'); @@ -142,8 +143,9 @@ module.exports = async () => { } }; ``` +::: -_Response_ +:::response Example response ```json [ @@ -178,6 +180,8 @@ _Response_ } ] ``` +::: +:::: ### Example @@ -246,7 +250,8 @@ Execute a `GET` request on the `category` Collection Type in order to fetch a sp Be sure that you activated the `find` permission for the `category` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```js const { default: axios } = require('axios'); @@ -260,8 +265,9 @@ module.exports = async () => { } }; ``` +::: -_Response_ +::: response Example response ```json [ @@ -306,6 +312,9 @@ _Response_ } ] ``` +::: + +:::: ### Example diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/angular.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/angular.md index a7e3aa82a2..ccc393a4f4 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/angular.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/angular.md @@ -21,7 +21,7 @@ npx -p @angular/cli ng new angular-app Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). -:::: tabs +:::: tabs card ::: tab axios @@ -45,11 +45,10 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -:::: tabs +::::: tabs card -::: tab axios - -_Request_ +:::: tab axios +::: request Example GET request with axios ```js import axios from 'axios'; @@ -60,11 +59,11 @@ axios.get('http://localhost:1337/restaurants').then(response => { ``` ::: +:::: -::: tab fetch - -_Request_ +:::: tab fetch +::: request Example GET request with fetch ```js fetch('http://localhost:1337/restaurants', { method: 'GET', @@ -77,9 +76,10 @@ fetch('http://localhost:1337/restaurants', { ``` ::: +:::: +::::: -_Response_ - +:::response Example response ```json [ { @@ -113,12 +113,11 @@ _Response_ } ] ``` - -:::: +::: ### Example -:::: tabs +:::: tabs card ::: tab axios @@ -223,11 +222,10 @@ Be sure that you activated the `create` permission for the `restaurant` Collecti In this example a `japanese` category has been created which has the id: 3. -:::: tabs +::::: tabs card -::: tab axios - -_Request_ +:::: tab axios +::: request Example POST request with axios ```js import axios from 'axios'; @@ -244,11 +242,11 @@ axios ``` ::: +:::: -::: tab fetch - -_Request_ +:::: tab fetch +::: request Example POST request with fetch ```js fetch('http://localhost:1337/restaurants', { method: 'POST', @@ -266,9 +264,10 @@ fetch('http://localhost:1337/restaurants', { ``` ::: +:::: +::::: -_Response_ - +:::response Example response ```json { "id": 2, @@ -290,12 +289,12 @@ _Response_ ] } ``` +::: -:::: ### Example -:::: tabs +:::: tabs card `./src/app.module.ts` @@ -536,14 +535,13 @@ Execute a `PUT` request on the `restaurant` Collection Type in order to update t Be sure that you activated the `put` permission for the `restaurant` Collection Type. -:::: tabs +::::: tabs card We consider that the id of your restaurant is `2`. and the id of your category is `2`. -::: tab axios - -_Request_ +:::: tab axios +::: request Example PUT request with axios ```js import axios from 'axios'; @@ -558,10 +556,10 @@ axios ``` ::: +:::: -::: tab fetch - -_Request_ +:::: tab fetch +::: request Example PUT request with fetch ```js fetch('http://localhost:1337/restaurants/2', { @@ -580,8 +578,10 @@ fetch('http://localhost:1337/restaurants/2', { ``` ::: +:::: +::::: -_Response_ +::: response Example response ```json { @@ -604,8 +604,7 @@ _Response_ ] } ``` - -:::: +::: ## Starter diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/dart.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/dart.md index 9c6c4f4560..fe860624c7 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/dart.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/dart.md @@ -42,7 +42,8 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```dart Map headers = { @@ -57,8 +58,9 @@ var response = await http.get( print(response.body) ``` +::: -_Response_ +::: response Example response ```json [ @@ -93,6 +95,8 @@ _Response_ } ] ``` +::: +:::: ### Example @@ -127,7 +131,8 @@ Be sure that you activated the `create` permission for the `restaurant` Collecti In this example a `japanese` category has been created which has the id: 3. -_Request_ +:::: api-call +::: request Example POST request ```dart Map headers = { @@ -145,8 +150,9 @@ var response = await http.post( }); ); ``` +::: -_Response_ +::: response Example response ```json { @@ -169,6 +175,8 @@ _Response_ ] } ``` +::: +:::: ### Example @@ -215,7 +223,8 @@ Execute a `PUT` request on the `restaurant` Collection Type in order to update t Be sure that you activated the `put` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example PUT request ```dart Map headers = { @@ -231,8 +240,9 @@ var response = await http.put( }); ); ``` +::: -_Response_ +::: response Example response ```json { @@ -255,6 +265,8 @@ _Response_ ] } ``` +::: +:::: ### Example diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/flutter.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/flutter.md index 1af7bdbfc0..47a0559a83 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/flutter.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/flutter.md @@ -51,7 +51,8 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```dart Map headers = { @@ -66,9 +67,9 @@ var response = await http.get( print(response.body) ``` +::: -_Response_ - +::: response Example response ```json [ { @@ -102,6 +103,8 @@ _Response_ } ] ``` +::: +:::: ## POST Request your collection type @@ -111,7 +114,8 @@ Be sure that you activated the `create` permission for the `restaurant` Collecti In this example a `japanese` category has been created which has the id: 3. -_Request_ +:::: api-call +::: request Example POST request ```dart Map headers = { @@ -129,8 +133,9 @@ var response = await http.post( }); ); ``` +::: -_Response_ +::: response Example response ```json { @@ -153,6 +158,8 @@ _Response_ ] } ``` +::: +:::: ## PUT Request your collection type @@ -160,7 +167,8 @@ Execute a `PUT` request on the `restaurant` Collection Type in order to update t Be sure that you activated the `put` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example PUT request ```dart Map headers = { @@ -176,8 +184,9 @@ var response = await http.put( }); ); ``` +::: -_Response_ +::: response Example Response ```json { @@ -200,6 +209,8 @@ _Response_ ] } ``` +::: +:::: ## Conclusion diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/gatsby.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/gatsby.md index 915dab2a36..58772d6655 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/gatsby.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/gatsby.md @@ -47,7 +47,8 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +:::request Example GET request ```graphql query { @@ -62,8 +63,9 @@ query { } } ``` +::: -_Response_ +:::response Example response ```json { @@ -82,6 +84,8 @@ _Response_ } } ``` +::: +:::: ### Example @@ -126,7 +130,8 @@ Execute a `GET` request on the `category` Collection Type in order to fetch a sp Be sure that you activated the `findOne` permission for the `category` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```graphql query { @@ -141,7 +146,9 @@ query { } ``` -_Response_ +::: + +::: response Example response ```json { @@ -160,6 +167,8 @@ _Response_ "extensions": {} } ``` +::: +:::: ### Example diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/go.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/go.md index cb56b8c11c..12710bc679 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/go.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/go.md @@ -18,8 +18,8 @@ Be sure to have [Go installed](https://golang.org/doc/install) on your computer. touch strapi.go ``` -Go has inbuilt module/package needed to make HTTP Requests like GET, POST PUT, DELETE. -We will use it("net/http") along with other modules/packages. +Go has built-in packages to make HTTP Requests like GET, POST, PUT, and DELETE. +We will use the "net/http" package along with other packages. ## GET Request your collection type @@ -28,14 +28,15 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. - -_Request_ +:::: api-call +::: request Example GET request ```go response, error := http.Get("http://localhost:1337/restaurants") ``` +::: -_Response_ +::: response Example response ```json [{ @@ -62,6 +63,8 @@ _Response_ ] }] ``` +::: +:::: ### Example @@ -96,8 +99,8 @@ Execute a `POST` request on the `restaurant` Collection Type in order to create Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type. - -_Request_ +:::: api-call +::: request Example POST request ```go postRest, _ := json.Marshal(map[string]string{ @@ -107,8 +110,9 @@ postRest, _ := json.Marshal(map[string]string{ responseBody := bytes.NewBuffer(postRest) resp, error := http.Post("http://localhost:1337/restaurants", "application/json", responseBody) ``` +::: -_Response_ +::: response Example response ```json { @@ -120,6 +124,8 @@ _Response_ "categories": [] } ``` +::: +:::: ### Example @@ -181,8 +187,8 @@ Execute a `PUT` request on the `restaurant` Collection Type in order to update t Be sure that you activated the `update` permission for the `restaurant` Collection Type. PUT Request is sligtly different as we need to target the particular thing we want update. We do this by first making a request to http://localhost:1337/restaurants/1 and then update what we want to update. In this example, we are going to update "Biscotte Restaurant" to "Restaurant Home". - -_Request_ +:::: api-call +::: request Example PUT request ```go putRest, _ := json.Marshal(map[string]string { @@ -193,8 +199,9 @@ url := "http://localhost:1337/restaurants/1" req, error := http.NewRequest(http.MethodPut, url, bytes.NewBuffer(putRest)) req.Header.Set("Content-Type", "application/json") ``` +::: -_Response_ +::: response Example response ```json { @@ -221,6 +228,8 @@ _Response_ ] } ``` +::: +:::: ### Example diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/graphql.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/graphql.md index 5587d87272..7942388aaf 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/graphql.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/graphql.md @@ -11,42 +11,37 @@ If you haven't gone through the Quick Start Guide, the way you request a Strapi ## Install the GraphQL plugin -Install the graphql plugin in your Strapi project. +Install the GraphQL plugin in your Strapi project. -:::: tabs + -::: tab yarn - -```bash -yarn strapi install graphql -``` - -::: - -::: tab npm - -```bash + +```sh npm run strapi install graphql ``` + -::: + +```sh +yarn strapi install graphql +``` + -::: tab strapi -```bash + +```sh strapi install graphql ``` + -::: - -:::: + ## Fetch your Restaurant collection type Play with the [GraphQL Playground](http://localhost:1337/graphql) to fetch your content. -_Request_ - +::::api-call +:::request Example query ```graphql query Restaurants { restaurants { @@ -59,9 +54,9 @@ query Restaurants { } } ``` +::: -_Response_ - +:::response Example response ```json { "data": { @@ -80,12 +75,14 @@ _Response_ } } ``` +::: +:::: ### Examples These examples do not guide you to configure your client with Apollo for your [GraphQL endpoint](http://localhost:1337/graphql). Please follow the associated documentation for each client: ([React](https://www.apollographql.com/docs/react/get-started/) and [Vue.js](https://apollo.vuejs.org/guide/installation.html#_1-apollo-client) here) -:::: tabs +:::: tabs card ::: tab React @@ -170,7 +167,8 @@ export default { ## Fetch your Category collection type -_Request_ +:::: api-call +::: request Example request ```graphql query Category { @@ -185,8 +183,9 @@ query Category { } } ``` +::: -_Response_ +:::response Example response ```json { @@ -205,10 +204,12 @@ _Response_ } } ``` +::: +:::: ## Examples -:::: tabs +:::: tabs card ::: tab React diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/gridsome.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/gridsome.md index e2adee7461..05e6e8a467 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/gridsome.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/gridsome.md @@ -49,7 +49,8 @@ Execute a `GET` request on the `restaurant` Collection Type in order to fetch al Be sure that you activated the `find` permission for the `restaurant` Collection Type. -_Request_ +:::: api-call +::: request Example GET request ```graphql query { @@ -64,9 +65,9 @@ query { } } ``` +::: -_Response_ - +:::response Example response ```json { "data": { @@ -85,12 +86,14 @@ _Response_ } } ``` +::: +:::: ### Example `./src/pages/Index.vue` -```js +```jsx