From 15e37cb5e44eb869d403fd8d77d03f4034b251e3 Mon Sep 17 00:00:00 2001 From: DMehaffy Date: Wed, 11 Aug 2021 07:01:39 -0700 Subject: [PATCH 01/36] Add temp workaround for legacy domain (#307) * Add temp workaround for legacy domain Adds a function that checks for node_env and if it's legacy it sets the base key to `/documentation/` else it just sets the base to the vuepress default `/` Also added a replacement for the landing meta-refresh * revert resource center redirection * add resource center link --- docs/.vuepress/config.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 1c8265b8e3..6cabab26a5 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -380,11 +380,19 @@ const checklinksIgnoredFiles = [ './developer-docs/latest/update-migration-guides/migration-guides/migration-guide-beta.20-to-3.0.0.md', // line 93 ]; +const checkLegacy = () => { + if (process.env.NODE_ENV == 'legacy') { + return '/documentation/'; + } else { + return '/'; + } +}; + module.exports = { title: '', port: 8080, description: 'The headless CMS developers love.', - base: '/documentation/', + base: checkLegacy(), plugins: { '@vuepress/medium-zoom': {}, 'vuepress-plugin-element-tabs': {}, @@ -503,6 +511,10 @@ module.exports = { themeConfig: { logo: '/assets/logo.png', nav: [ + { + text: 'Resource Center', + link: 'https://strapi.io/resource-center', + }, { text: 'Documentation', items: [ From d53b228622460f0dca6bb1397d528a5293a5e435 Mon Sep 17 00:00:00 2001 From: DMehaffy Date: Wed, 11 Aug 2021 07:28:26 -0700 Subject: [PATCH 02/36] Update node env var to fix build bug (#381) --- docs/.vuepress/config.js | 2 +- docs/yarn.lock | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 6cabab26a5..93192dc7e2 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -381,7 +381,7 @@ const checklinksIgnoredFiles = [ ]; const checkLegacy = () => { - if (process.env.NODE_ENV == 'legacy') { + if (process.env.DEPLOY_ENV == 'legacy') { return '/documentation/'; } else { return '/'; diff --git a/docs/yarn.lock b/docs/yarn.lock index 3fab5eab47..dc8ba6e09e 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1139,11 +1139,6 @@ dependencies: lodash.debounce "^4.0.8" -"@vuepress/plugin-google-analytics@^1.7.1": - version "1.8.0" - resolved "https://registry.yarnpkg.com/@vuepress/plugin-google-analytics/-/plugin-google-analytics-1.8.0.tgz#99752be07867730df27e830a15c95b3f25b04741" - integrity sha512-1aILIrGjyGOtNROZhNRezrnAsTq3RA4Q9/euTkpdNDyRs4etmW6hWm5yx43Sp+upREMycpbXZ/QoOWmahGwMNA== - "@vuepress/plugin-last-updated@1.8.0": version "1.8.0" resolved "https://registry.yarnpkg.com/@vuepress/plugin-last-updated/-/plugin-last-updated-1.8.0.tgz#a0fcd2906a4dcae107634013f7c49ddd05e0de87" From 18cef5a06fd165aab05cfb044ea0497c50c443a6 Mon Sep 17 00:00:00 2001 From: DMehaffy Date: Wed, 11 Aug 2021 07:44:04 -0700 Subject: [PATCH 03/36] Add a local node script for legacy (#382) --- docs/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index 97a3630291..8bc8a0f823 100644 --- a/docs/package.json +++ b/docs/package.json @@ -3,7 +3,8 @@ "version": "3.0.0", "main": "index.js", "scripts": { - "dev": "vuepress dev", + "dev": "DEPLOY_ENV=legacy vuepress dev", + "dev:prod": "vuepress dev", "build": "vuepress build", "check-links": "vuepress check-md" }, From 94cbee315618aa129af86098d4287b62a1a9fce5 Mon Sep 17 00:00:00 2001 From: Richard Nsama Date: Mon, 16 Aug 2021 11:16:45 +0200 Subject: [PATCH 04/36] Removed Slack from the Navbar Community dropdown (#384) --- docs/.vuepress/config.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 93192dc7e2..01ad86b617 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: [ [ @@ -401,7 +399,7 @@ module.exports = { }, seo: { siteTitle: (_, $site) => $site.title, - title: $page => $page.title, + title: ($page) => $page.title, }, 'vuepress-plugin-code-copy': { color: '#ffffff', @@ -556,13 +554,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', @@ -604,8 +600,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', From 66d1a063a2d84fa8bdf80a93cbe17bfef7850676 Mon Sep 17 00:00:00 2001 From: Mike Casebolt Date: Fri, 20 Aug 2021 01:35:21 -0700 Subject: [PATCH 05/36] Edit the "Create a Go File" section (#388) The word "built-in" is much more common than "inbuilt". Go has packages, and we don't need to refer to them as "packages/modules". Also, add a missing comma. --- .../latest/developer-resources/content-api/integrations/go.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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..f66a7f14a3 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 From fd5047403bd1e4413a794c9b36f32319f56a18aa Mon Sep 17 00:00:00 2001 From: Collisio Technologies <54179909+Collisio@users.noreply.github.com> Date: Fri, 20 Aug 2021 10:42:47 +0200 Subject: [PATCH 06/36] remove DO managed db warning (#390) Co-authored-by: Pierre Wizla --- .../deployment/hosting-guides/digitalocean-app-platform.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.md b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.md index 6f5f3fcbf0..ce44d4f53a 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.md @@ -7,10 +7,6 @@ description: Learn in this guide how to deploy your Strapi application on Digita This is a step-by-step guide for deploying a Strapi project to [DigitalOcean's App Platform](https://digitalocean.com). App Platform is DigitalOcean's Platform as a Service (PaaS) that will handle deploying, networking, SSL, and more for your app. It is the easiest way to deploy Strapi to DigitalOcean. -::: warning -Please note that as of June 18th, 2021 we were made aware that there is a critical security issue when using DigitalOcean Managed databases with the DigitalOcean App platform. We do not currently recommend using this combination and if you require a managed database, you should use a DigitalOcean Droplet instead. More information can be found on the DigitalOcean [forum thread](https://www.digitalocean.com/community/questions/how-to-add-my-digitalocean-app-as-a-trusted-resource-for-my-managed-database) and [feature request](https://ideas.digitalocean.com/app-framework-services/p/allow-managed-databases-trusted-sources-to-be-used-with-app-platform) pages. -::: - Databases can be created using DigitalOcean's [Managed Databases](https://www.digitalocean.com/products/managed-databases/). Prior to starting this guide, you should have created a [Strapi project](/developer-docs/latest/getting-started/quick-start.md). And have read through the [configuration](/developer-docs/latest/setup-deployment-guides/deployment.md#application-configuration) section. From 24c999a74e18376a3b2173613fefa1ac310595cb Mon Sep 17 00:00:00 2001 From: Pierre Burgy Date: Fri, 20 Aug 2021 10:52:04 +0200 Subject: [PATCH 07/36] Add hiring link (#387) Co-authored-by: Pierre Wizla --- docs/.vuepress/config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 01ad86b617..91bd086779 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -624,6 +624,10 @@ module.exports = { }, ], }, + { + text: "We're hiring!", + link: 'https://strapi.io/careers#open-positions', + }, ], repo: 'strapi/documentation', docsDir: 'docs', From 8cb692f5212fe2f0e721582799475e0f29a63a8b Mon Sep 17 00:00:00 2001 From: Daniel Gustaw Date: Fri, 20 Aug 2021 10:55:22 +0200 Subject: [PATCH 08/36] Case for 1 can be handled in loop (#370) Co-authored-by: Pierre Wizla --- .../latest/development/plugins/upload.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/developer-docs/latest/development/plugins/upload.md b/docs/developer-docs/latest/development/plugins/upload.md index fc23a50e93..75563299d5 100644 --- a/docs/developer-docs/latest/development/plugins/upload.md +++ b/docs/developer-docs/latest/development/plugins/upload.md @@ -241,15 +241,9 @@ Code if (!['submit', 'file'].includes(currentElement.type)) { data[currentElement.name] = currentElement.value; } else if (currentElement.type === 'file') { - if (currentElement.files.length === 1) { - const file = currentElement.files[0]; + for (let i = 0; i < currentElement.files.length; i++) { + const file = currentElement.files[i]; formData.append(`files.${currentElement.name}`, file, file.name); - } else { - for (let i = 0; i < currentElement.files.length; i++) { - const file = currentElement.files[i]; - - formData.append(`files.${currentElement.name}`, file, file.name); - } } } } From 03394ab076e795a386e0aa67cc89550dac99b63e Mon Sep 17 00:00:00 2001 From: Bartek Kowalik Date: Mon, 23 Aug 2021 10:58:08 +0200 Subject: [PATCH 09/36] Change code snippet for service create customisation (#372) * Change code snippet for service create customisation * Review changes --- .../latest/development/backend-customization.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/developer-docs/latest/development/backend-customization.md b/docs/developer-docs/latest/development/backend-customization.md index 3cf8458832..bfea00e8ff 100644 --- a/docs/developer-docs/latest/development/backend-customization.md +++ b/docs/developer-docs/latest/development/backend-customization.md @@ -812,11 +812,10 @@ module.exports = { */ async create(data, { files } = {}) { - const isDraft = isDraft(data, strapi.models.restaurant); const validData = await strapi.entityValidator.validateEntityCreation( strapi.models.restaurant, data, - { isDraft } + { isDraft: isDraft(data, strapi.models.restaurant) } ); const entry = await strapi.query('restaurant').create(validData); @@ -854,11 +853,10 @@ module.exports = { async update(params, data, { files } = {}) { const existingEntry = await strapi.query('restaurant').findOne(params); - const isDraft = isDraft(existingEntry, strapi.models.restaurant); const validData = await strapi.entityValidator.validateEntityUpdate( strapi.models.restaurant, data, - { isDraft } + { isDraft: isDraft(existingEntry, strapi.models.restaurant) } ); const entry = await strapi.query('restaurant').update(params, validData); From 52c72f3f6b639798b0871494148b00d1c00e117f Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 25 Aug 2021 15:49:02 +0200 Subject: [PATCH 10/36] VuePress enhancements (#368) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add consistency * Add strapi & prerequisites Markdown containers Note: Using babel-style for plugins declarations as it seems to work better with multiple declarations for vuepress-plugin-container * Use :::strapi and :::prerequisites in existing docs * Add generic callout, tweak strapi & tip callouts, and clean config file * Clean up unused inline styles from Markdown files * Remove πŸ€“ from Markdown files in strapi callouts as it's now included * Use generic callout for congratulations in QSG * Add api-call, request and response custom containers * Fully redesign style for request & response containers * Use api-callout container on existing documentation * Remove emoji from :::strapi as it's included * Add 'note' custom callout * Add 'important', 'caution' and 'warning' custom callouts In our mind, they are 3 different levels: - important, the less strong - caution, medium importance ( = VuePress's default 'warning') - warning, the strongest ( = VuePress's default 'danger') * Remove important callout & cleanup CSS We decided that we'll go with a unique callout, "caution". The title can still be adjusted when necessary. * Merge branch 'repo/snippets' into repo/vuepress-enhanced * Apply new callouts and minimal tab styles everywhere * Apply minimal tabs to integration guides * Update VuePress to 1.8.2 * Temporarily setting root url (testing Vercel deploy) * Revert "Temporarily setting root url (testing Vercel deploy)" This reverts commit ba7b7d264b38c844ae6f5131f851f715560c8ec4. * Use code-blocks and code-groups everywhere appropriate * Tweak request/response CSS based on designers feedback * Simplify some wordings in i18n doc * Apply api-call/request/response containers throughout the docs * Tweak request/response CSS for use outside of :::api-call * Update callouts in the user guide * Remove Google Analytics Vuepress plugin and add GTM See [this PR](https://github.com/strapi/documentation/pull/380) * Temp remove yarn.lock to fix conflicts * Fix emoji for warning callout * Converting warning to note callout in Templates file * Fix QSG callouts * Add yarn.lock * Remove marketing note at end of 21yunbox hosting guide * Removing GTM script from plugins (it's already in head) * Don't make text prop required in badges as a default is already provided Co-authored-by: MΓ©gane Lacheny --- docs/.vuepress/config.js | 85 +- docs/.vuepress/styles/index.styl | 4 +- .../styles/strapi-custom-blocks.styl | 194 ++ .../theme/global-components/BronzeBadge.vue | 2 +- .../theme/global-components/CustomBadge.vue | 2 +- .../theme/global-components/GoldBadge.vue | 2 +- .../theme/global-components/SilverBadge.vue | 2 +- .../latest/developer-resources/cli/CLI.md | 8 +- .../content-api/content-api.md | 172 +- .../content-api/integrations/11ty.md | 21 +- .../content-api/integrations/angular.md | 65 +- .../content-api/integrations/dart.md | 24 +- .../content-api/integrations/flutter.md | 25 +- .../content-api/integrations/gatsby.md | 17 +- .../content-api/integrations/go.md | 27 +- .../content-api/integrations/graphql.md | 55 +- .../content-api/integrations/gridsome.md | 23 +- .../content-api/integrations/laravel.md | 4 +- .../content-api/integrations/next-js.md | 90 +- .../content-api/integrations/nuxt-js.md | 110 +- .../content-api/integrations/php.md | 35 +- .../content-api/integrations/python.md | 24 +- .../content-api/integrations/react.md | 93 +- .../content-api/integrations/ruby.md | 27 +- .../content-api/integrations/sapper.md | 65 +- .../content-api/integrations/svelte.md | 59 +- .../content-api/integrations/vue-js.md | 70 +- .../global-strapi/api-reference.md | 2 +- .../latest/development/admin-customization.md | 50 +- .../development/backend-customization.md | 70 +- .../local-plugins-customization.md | 37 +- .../development/plugin-customization.md | 2 +- .../development/plugins/documentation.md | 27 +- .../latest/development/plugins/email.md | 22 +- .../latest/development/plugins/graphql.md | 70 +- .../latest/development/plugins/i18n.md | 225 +- .../latest/development/plugins/upload.md | 38 +- .../development/plugins/users-permissions.md | 8 +- .../latest/getting-started/introduction.md | 51 +- .../latest/getting-started/quick-start.md | 85 +- .../getting-started/usage-information.md | 4 +- .../latest/guides/auth-request.md | 2 +- docs/developer-docs/latest/guides/client.md | 10 +- .../latest/guides/custom-admin.md | 4 +- .../latest/guides/custom-data-response.md | 2 +- docs/developer-docs/latest/guides/draft.md | 2 +- .../latest/guides/error-catching.md | 2 +- docs/developer-docs/latest/guides/is-owner.md | 2 +- .../latest/guides/jwt-validation.md | 2 +- .../latest/guides/process-manager.md | 10 +- .../guides/registering-a-field-in-admin.md | 12 +- .../latest/guides/secure-your-app.md | 10 +- docs/developer-docs/latest/guides/slug.md | 4 +- .../latest/guides/unit-testing.md | 15 +- .../setup-deployment-guides/configurations.md | 153 +- .../configurations/databases/mongodb.md | 47 +- .../configurations/databases/sqlite.md | 26 +- .../setup-deployment-guides/deployment.md | 33 +- .../deployment/hosting-guides/21yunbox.md | 32 +- .../deployment/hosting-guides/amazon-aws.md | 6 +- .../deployment/hosting-guides/digitalocean.md | 4 +- .../hosting-guides/google-app-engine.md | 28 +- .../deployment/hosting-guides/heroku.md | 80 +- .../deployment/hosting-guides/qovery.md | 10 +- .../deployment/hosting-guides/render.md | 2 +- .../optional-software/caddy-proxy.md | 8 +- .../optional-software/haproxy-proxy.md | 8 +- .../optional-software/nginx-proxy.md | 8 +- .../setup-deployment-guides/installation.md | 2 +- .../installation/cli.md | 86 +- .../installation/digitalocean-one-click.md | 49 +- .../installation/docker.md | 7 +- .../installation/platformsh.md | 26 +- .../installation/render.md | 28 +- .../installation/templates.md | 2 +- .../latest/snippets/mongodb-warning.md | 2 + .../update-migration-guides/update-version.md | 40 +- docs/package.json | 8 +- .../configuring-view-of-content-type.md | 6 +- .../introduction-to-content-manager.md | 12 +- .../managing-relational-fields.md | 10 +- .../saving-and-publishing-content.md | 8 +- .../content-manager/translating-content.md | 4 +- .../latest/content-manager/writing-content.md | 4 +- .../configuring-fields-content-type.md | 4 +- .../creating-new-content-type.md | 4 +- .../introduction-to-content-types-builder.md | 2 +- .../managing-content-types.md | 6 +- .../latest/getting-started/introduction.md | 4 +- .../installing-plugins-via-marketplace.md | 4 +- .../latest/plugins/introduction-to-plugins.md | 2 +- .../latest/plugins/strapi-plugins.md | 2 +- ...uring-users-permissions-plugin-settings.md | 2 +- .../settings/managing-global-settings.md | 2 +- .../configuring-administrator-roles.md | 14 +- .../configuring-end-users-roles.md | 4 +- .../managing-administrators.md | 4 +- .../managing-end-users.md | 2 +- docs/yarn.lock | 2476 +++++++++-------- 99 files changed, 2737 insertions(+), 2607 deletions(-) create mode 100644 docs/.vuepress/styles/strapi-custom-blocks.styl create mode 100644 docs/developer-docs/latest/snippets/mongodb-warning.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 91bd086779..34059aa47b 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -378,6 +378,68 @@ 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/'; @@ -391,22 +453,7 @@ module.exports = { port: 8080, description: 'The headless CMS developers love.', base: checkLegacy(), - 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': {}, - }, + plugins: plugins, head: [ [ 'link', @@ -646,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..c983a55bc3 --- /dev/null +++ b/docs/.vuepress/styles/strapi-custom-blocks.styl @@ -0,0 +1,194 @@ +.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..5abaee62df 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,7 @@ _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..15723532f0 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 { @@ -605,7 +605,6 @@ _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 f66a7f14a3..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 @@ -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..e8905cc918 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