diff --git a/docs/.vuepress/config/markdown.js b/docs/.vuepress/config/markdown.js index 92e66410a7..fbb3da1197 100644 --- a/docs/.vuepress/config/markdown.js +++ b/docs/.vuepress/config/markdown.js @@ -1,4 +1,5 @@ const markdown = { + lineNumbers: true, extendMarkdown: md => { // use more markdown-it plugins! md.use(require('markdown-it-include')); diff --git a/docs/.vuepress/config/metas.js b/docs/.vuepress/config/metas.js index f33cb260bf..16524c1f94 100644 --- a/docs/.vuepress/config/metas.js +++ b/docs/.vuepress/config/metas.js @@ -100,6 +100,11 @@ const metas = { {}, `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KN9JRWG');`, ], + [ + 'script', + {}, + `(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:3105445,hjsv:6};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`, + ], ], extraWatchFiles: [ '.vuepress/config/sidebar-developer.js', diff --git a/docs/.vuepress/config/sidebar-developer.js b/docs/.vuepress/config/sidebar-developer.js index ad9a6a04c2..5d0a9bf454 100644 --- a/docs/.vuepress/config/sidebar-developer.js +++ b/docs/.vuepress/config/sidebar-developer.js @@ -198,6 +198,7 @@ const developer = [ ['/developer-docs/latest/development/admin-customization', 'Admin panel customization'], ['/developer-docs/latest/development/plugins-extension.md', 'Plugins extension'], ['/developer-docs/latest/development/plugins-development.md', 'Plugins development'], + ['/developer-docs/latest/development/custom-fields.md', 'Custom fields'], ['/developer-docs/latest/development/typescript.md', 'TypeScript'], ['/developer-docs/latest/development/providers.md', 'Providers'], ], @@ -209,118 +210,110 @@ const developer = [ sidebarDepth: 2, children: [ { - title: 'APIs Reference', + title: 'REST API', + path: '/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html', collapsable: true, - sidebarDepth: 1, + initialOpenGroupIndex: -1, + sidebarDepth: 3, children: [ + ['/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html', 'API endpoints'], { - title: 'REST API', - path: '/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html', + title: 'API parameters', + path: '/developer-docs/latest/developer-resources/database-apis-reference/rest/api-parameters.html', collapsable: true, initialOpenGroupIndex: -1, - sidebarDepth: 3, - children: [ - ['/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html', 'API endpoints'], - { - title: 'API parameters', - path: '/developer-docs/latest/developer-resources/database-apis-reference/rest/api-parameters.html', - collapsable: true, - initialOpenGroupIndex: -1, - children: [ - [ - '/developer-docs/latest/developer-resources/database-apis-reference/rest/filtering-locale-publication.md', - 'Filtering, Locale, and Publication State' - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md', - 'Population & Field Selection' - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.md', - 'Sort & Pagination' - ], - ] - }, - ], - }, - [ - '/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.md', - 'GraphQL API', - ], - { - title: 'Entity Service API', - path: - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service-api', - collapsable: true, children: [ [ - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/crud.md', - 'CRUD operations', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/filter.md', - 'Filters', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/populate.md', - 'Populate', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/order-pagination.md', - 'Ordering & pagination', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/components-dynamic-zones.md', - 'Components and dynamic zones', + '/developer-docs/latest/developer-resources/database-apis-reference/rest/filtering-locale-publication.md', + 'Filtering, Locale, and Publication State' ], - ], - }, - { - title: 'Query Engine API', - path: - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine-api.html', - collapsable: true, - // sidebarDepth: 3, - children: [ - [ - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/single-operations.md', - 'Single Operations', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/bulk-operations.md', - 'Bulk Operations', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/filtering.md', - 'Filtering', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/populating.md', - 'Populating', - ], - [ - '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/order-pagination.md', - 'Ordering & pagination', - ], - ], - }, - - { - title: 'Plugin APIs Reference', - collapsable: true, - children: [ [ - '/developer-docs/latest/developer-resources/plugin-api-reference/server.md', - 'Server API for plugins', + '/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md', + 'Population & Field Selection' ], [ - '/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md', - 'Admin Panel API for plugins', + '/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.md', + 'Sort & Pagination' ], - ], + ] }, ], }, + [ + '/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.md', + 'GraphQL API', + ], + { + title: 'Entity Service API', + path: + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service-api', + collapsable: true, + children: [ + [ + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/crud.md', + 'CRUD operations', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/filter.md', + 'Filters', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/populate.md', + 'Populate', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/order-pagination.md', + 'Ordering & pagination', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/entity-service/components-dynamic-zones.md', + 'Components and dynamic zones', + ], + ], + }, + { + title: 'Query Engine API', + path: + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine-api.html', + collapsable: true, + // sidebarDepth: 3, + children: [ + [ + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/single-operations.md', + 'Single Operations', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/bulk-operations.md', + 'Bulk Operations', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/filtering.md', + 'Filtering', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/populating.md', + 'Populating', + ], + [ + '/developer-docs/latest/developer-resources/database-apis-reference/query-engine/order-pagination.md', + 'Ordering & pagination', + ], + ], + }, + { + title: 'Plugin APIs', + collapsable: true, + children: [ + [ + '/developer-docs/latest/developer-resources/plugin-api-reference/server.md', + 'Server API for plugins', + ], + [ + '/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md', + 'Admin Panel API for plugins', + ], + ], + }, ['/developer-docs/latest/developer-resources/cli/CLI', 'Command Line Interface'], ['/developer-docs/latest/developer-resources/error-handling.md', 'Error handling'], { diff --git a/docs/.vuepress/public/assets/NextIcon.svg b/docs/.vuepress/public/assets/NextIcon.svg new file mode 100644 index 0000000000..99035875e6 --- /dev/null +++ b/docs/.vuepress/public/assets/NextIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/.vuepress/public/assets/logo.svg b/docs/.vuepress/public/assets/logo.svg index c7d3241966..4cfa55c078 100644 --- a/docs/.vuepress/public/assets/logo.svg +++ b/docs/.vuepress/public/assets/logo.svg @@ -1,13 +1,19 @@ - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/docs/.vuepress/styles/branding.styl b/docs/.vuepress/styles/branding.styl new file mode 100644 index 0000000000..73e86877c9 --- /dev/null +++ b/docs/.vuepress/styles/branding.styl @@ -0,0 +1,95 @@ +body + font-family system-ui + color $neutral800 + +a + color $primary600 + font-weight 600 +.theme-default-content:not(.custom) + a.header-anchor + text-decoration none +.dropdown-title + font-weight 600 !important + +h1, h2, h3, h4, h5, h6 + color: $neutral900 + +h2 + border-bottom-color $neutral150 + +.theme-default-content:not(.custom) + max-width 840px + +.theme-default-content code + background-color $primary100 + color $primary600 + border-radius 4px + +.sidebar-links a:hover +.sidebar-heading.router-link-active +.nav-link.router-link-active +.sidebar-heading.clickable.active + color: $primary600 !important +.sidebar-heading.clickable.active + border-left-color $primary600 !important +.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after + border-left-color $primary600 !important + +.nav-links a +.nav-links a.router-link-active + font-weight 600 + color: $neutral700 + +.nav-links a:hover +.nav-links a.active +.sidebar-link.active + color: $primary600 !important + // TODO: override NavLinks.vue to avoid !important + +/** + * Tables + */ +table > tbody > tr:nth-child(2n) // disable alternating row colors + background-color: white +table > tr, th, td + border-color $neutral200 + +/** + * Code blocks + */ +[class^="language-"] + background-color $neutral900 !important +[class^="language-"]::after + background-color $neutral900 !important + border-right-color: $neutral900 !important + +.line-number + color $neutral600 + +code + .token + &.comment + color $neutral400 + +/** + * Update code group styles + */ +.theme-code-group__nav + background-color $neutral900 !important + // TODO: override CodeGroup.vue to avoid !important + +.theme-code-group +.el-tabs__content + .theme-code-group__li + .theme-code-group__nav-tab.theme-code-group__nav-tab-active + border-bottom-color $primary500 !important + +/** + * Update "tabs card" styles + */ +.el-tabs__header + .el-tabs__item.is-active + .el-tabs__item:not(.is-disabled):hover + color $primary600 + .el-tabs__active-bar + background-color $primary600 !important diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl index ef392e1f9b..f7d57e3080 100644 --- a/docs/.vuepress/styles/index.styl +++ b/docs/.vuepress/styles/index.styl @@ -1,10 +1,6 @@ -.el-tabs__item.is-active - color: $accentColor !important - -.el-tabs__item:not(.is-disabled):hover - color: $accentColor !important - .sidebar-heading:not(.clickable) opacity: 1 !important +@import "palette.styl" +@import "branding.styl" @import "strapi-custom-blocks.styl" diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index 8c59b67737..9cb1502ac4 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -5,4 +5,51 @@ $borderColor = #eeeeee $codeBgColor = #282c34 // Layout -$contentWidth = 900px \ No newline at end of file +$contentWidth = 900px + + +// Strapi branding palette +$primary700 = #4945FF +$primary600 = #4945FF +$primary500 = #7B79FF +$primary200 = #D9D8FF +$primary100 = #F0F0FF + +$success700 = #2F6846 +$success600 = #328048 +$success500 = #5cb176 +$success200 = #C6F0C2 +$success100 = #EAFBE7 + +$danger700 = #B72B1A +$danger600 = #D02B20 +$danger500 = #EE5E52 +$danger200 = #F5C0B8 +$danger100 = #FCECEA + +$warning700 = #BE5D01 +$warning600 = #D9822F +$warning200 = #FAE7B9 +$warning100 = #FDF4DC + +$secondary700 = #006096 +$secondary600 = #0C75AF +$secondary200 = #B8E1FF +$secondary100 = #EAF5FF + +$alternative700 = #8212D1 +$alternative600 = #9736E8 +$alternative200 = #E0C1F4 +$alternative100 = #F6E6FC + +$neutral900 = #212134 +$neutral800 = #32324D +$neutral700 = #4A4A6A +$neutral600 = #666687 +$neutral500 = #8E8EA9 +$neutral400 = #A5A5BA +$neutral300 = #C0C0CF +$neutral200 = #DCDCE4 +$neutral150 = #eaeaef +$neutral100 = #F6F6F9 +$neutral0 = #FFFFFF diff --git a/docs/.vuepress/styles/strapi-custom-blocks.styl b/docs/.vuepress/styles/strapi-custom-blocks.styl index 6c2004d06f..0e11e04a6a 100644 --- a/docs/.vuepress/styles/strapi-custom-blocks.styl +++ b/docs/.vuepress/styles/strapi-custom-blocks.styl @@ -22,46 +22,77 @@ 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) + color: $neutral800 .custom-block-title - color #816bfa - font-weight 700 - p, li - color #2c3e50 - a - color #007eff + font-weight 600 + &.callout &.callout-alt &.prerequisites - background-color #f8f8f8 - border-color #bbbbba + background-color $neutral100 + border-color $neutral500 + .custom-block-title + color: $neutral800 + a + color $primary600 + code + background-color $primary200 &.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 + &.strapi + background-color $primary100 + border-color $primary600 .custom-block-title - color #B29400 + color $primary700 a - color #2c3e50 + color $primary600 + code + background-color $primary200 &.warning - border-color #cc0000 - background-color rgb(255, 230, 230) - color #4d0000 + background-color $danger100 + border-color $danger600 .custom-block-title - color #900 + color $danger700 a - color #2c3e50 + color $danger600 + code + background-color $danger200 + color: $danger600 + &.caution + background-color $warning100 + border-color $warning600 + .custom-block-title + color $warning700 + a + color $warning600 + code + background-color $warning200 + color: $warning600 &.tip - background-color #EFFDF6 + background-color $success100 + border-color $success600 + .custom-block-title + color $success700 + a + color $success600 + code + background-color $success200 + color: $success600 + &.note + background-color $secondary100 + border-color $secondary600 + .custom-block-title + color $secondary700 + a + color $secondary600 + code + background-color $secondary200 + color: $secondary600 + &.details + background-color $neutral150 + border-radius 6px /** * API CALLS */ @@ -74,7 +105,7 @@ margin: 0 -12rem 2rem 0 align-items: stretch &.request - background-color: #666687 + background-color: $neutral700 padding: 0 1rem 1rem border-radius: 12px font-size: 100% @@ -86,7 +117,7 @@ border-radius: 12px 12px 0 0 padding: .5rem 1rem font-weight: 700 - background-color: #32324D + background-color: $neutral600 color: #F6F6F9 font-size: 90%; .custom-block-title+p @@ -103,10 +134,15 @@ ul, ol padding-left: 3rem [class^="language-"] - background-color: transparent - font-size: 110% + background-color $neutral700 !important + font-size: 100% &::before color: #EAEAEF + &::after + background-color $neutral700 !important + border-right-color $neutral700 !important + .line-number + color $neutral500 pre padding: 1rem 0 0 1rem code @@ -129,17 +165,17 @@ &.comment color: #d9d9d9 &.response - background-color: #DCDCE4 + background-color: $neutral900 margin-top: 2rem padding: 0 1rem 1rem border-radius: 12px font-size: 100% - color: #666687 + color: $neutral200 .extra-class::before - color: #666687 + color: $neutral200 .custom-block-title - background-color: #C0C0CF - color: #32324D + background-color: $neutral800 + color: $neutral0 border-radius: 12px 12px 0 0 margin-left: -1rem margin-right: -1rem @@ -150,23 +186,23 @@ margin-bottom: .5rem [class^="language-"] background-color: transparent - font-size: 110% + font-size: 100% &::before - color: #666687 + color: $neutral200 pre padding: 1rem 0 0 1rem code - color: #666687 !important + color: $neutral200 !important .token - color: #666687 // catch-all for undefined colors + color: $neutral200 // catch-all for undefined colors &.punctuation &.operator &.property - color: #666687 + color: $neutral200 &.string - color: #2B7732 + color: $success500 &.number - color: #B7322A + color: $danger500 &.comment color: #8585b2 &.request @@ -242,3 +278,37 @@ .custom-block.details color rgb(44, 62, 80) +.install-link + // text-decoration: none + background-color: #4945FF + border-radius: 6px + padding: 20px + color: $primary100 + justify-content: space-between + + .text + flex-grow: 1 + + .title + color: $neutral0 + + .description + color: $primary100 + + .arrow + width: 24px + height: 24px + transform: translateX(-8px) + transition: all .2s ease-in-out + + &:hover + .title + color: $neutral0 + text-decoration: underline + .description + color: $neutral0 + // text-decoration: none + .arrow + transform: translateX(0) + + diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue index 2c3662f06a..04f5883067 100644 --- a/docs/.vuepress/theme/components/Navbar.vue +++ b/docs/.vuepress/theme/components/Navbar.vue @@ -103,10 +103,10 @@ $navbar-horizontal-padding = 1.5rem a, span, img display inline-block .logo - height $navbarHeight - 1.4rem + height 25px min-width $navbarHeight - 1.4rem margin-right 0.8rem - vertical-align top + vertical-align middle .site-name font-size 1.3rem font-weight 600 diff --git a/docs/.vuepress/theme/global-components/InstallLink.vue b/docs/.vuepress/theme/global-components/InstallLink.vue index 460f2ed343..ab6bfb6031 100644 --- a/docs/.vuepress/theme/global-components/InstallLink.vue +++ b/docs/.vuepress/theme/global-components/InstallLink.vue @@ -3,14 +3,21 @@ - +

+ + + foo + + - \ No newline at end of file + diff --git a/docs/.vuepress/theme/icons/NextIcon.svg b/docs/.vuepress/theme/icons/NextIcon.svg new file mode 100644 index 0000000000..99035875e6 --- /dev/null +++ b/docs/.vuepress/theme/icons/NextIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/developer-docs/latest/developer-resources/cli/CLI.md b/docs/developer-docs/latest/developer-resources/cli/CLI.md index 19269949eb..5253f36bc6 100644 --- a/docs/developer-docs/latest/developer-resources/cli/CLI.md +++ b/docs/developer-docs/latest/developer-resources/cli/CLI.md @@ -247,7 +247,7 @@ strapi ts:generate-types * **strapi ts:generate-types --out-dir <path>** or **strapi ts:generate-types -o <path>**
Generate typings specifying the output directory in which the file will be created. * **strapi ts:generate-types --file <filename>** or **strapi ts:generate-types -f <filename>**
- Generate typings specifiying the name of the file to contain the types declarations. + Generate typings specifying the name of the file to contain the types declarations. ## strapi routes:list 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 06b18bf108..12808a509e 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 @@ -159,7 +159,7 @@ query { strapiCategory(data: { elemMatch: { id: { eq: 1 } } }) { data { id - atrributes { + attributes { name restaurants { name @@ -216,7 +216,7 @@ const query = graphql` strapiCategory(data: { elemMatch: { id: { eq: 1 } } }) { data { id - atrributes { + attributes { name restaurants { id 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 f65993042d..77884c0e2b 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 @@ -170,7 +170,7 @@ func postD() { resp, error := http.Post("http://localhost:1337/api/restaurants", "application/json", responseBody) //Handle Error if error != nil { - log.Fatalf("An Error Occured %v", error) + log.Fatalf("An Error Occurred %v", error) } defer resp.Body.Close() //Read the response body @@ -195,7 +195,7 @@ PUT Request is sligtly different as we need to target the particular thing we wa ```go putRest, _ := json.Marshal(map[string]string { - "name": "Resturant Homes", + "name": "Restaurant Homes", }) client := &http.Client{} url := "http://localhost:1337/api/restaurants/1" @@ -209,7 +209,7 @@ req.Header.Set("Content-Type", "application/json") ```json { "id": 1, - "name": "Resturant Homes", + "name": "Restaurant Homes", "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.", "published_at": "2021-03-07T10:10:46.949Z", "created_at": "2021-03-07T10:08:53.929Z", @@ -290,7 +290,7 @@ func postD() { } func putD() { putRest, _ := json.Marshal(map[string]string{ - "name": "Resturant Homes", + "name": "Restaurant Homes", }) client := &http.Client{} url := "http://localhost:1337/api/restaurants/1" diff --git a/docs/developer-docs/latest/developer-resources/content-api/integrations/php.md b/docs/developer-docs/latest/developer-resources/content-api/integrations/php.md index 3c53cc5bec..54805dda40 100644 --- a/docs/developer-docs/latest/developer-resources/content-api/integrations/php.md +++ b/docs/developer-docs/latest/developer-resources/content-api/integrations/php.md @@ -195,7 +195,7 @@ postRestaurant(); Execute a `PUT` request on the `restaurant` collection type in order to update the category of a restaurant. 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 entry we want update. We do this by first making a request to http://localhost:1337/api/restaurants/1 and then update what we want to update. In this example, we are going to update "Biscotte Restaurant" to "Femoni Kitchen". +PUT Request is slightly different as we need to target the particular entry we want update. We do this by first making a request to http://localhost:1337/api/restaurants/1 and then update what we want to update. In this example, we are going to update "Biscotte Restaurant" to "Femoni Kitchen". :::: api-call ::: request Example PUT request diff --git a/docs/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md b/docs/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md index 54d88b1c3b..eb73a0b169 100644 --- a/docs/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md +++ b/docs/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md @@ -223,6 +223,7 @@ To populate only specific relations one-level deep, use one of the following met !!!include(developer-docs/latest/developer-resources/database-apis-reference/rest/snippets/qs-for-query-body.md)!!! ```js +// Array method const qs = require('qs'); const query = qs.stringify({ populate: ['categories'], @@ -241,6 +242,9 @@ const query = qs.stringify({ encodeValuesOnly: true, // prettify URL }); +await request(`/api/articles?${query}`); +``` + ::: #### Populate 2 levels diff --git a/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md b/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md index f44f9b6881..69fbfe71b9 100644 --- a/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md +++ b/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md @@ -49,6 +49,7 @@ Within the register function, a plugin can: * [create a new settings section](#createsettingsection) * define [injection zones](#injection-zones-api) * [add reducers](#reducers-api) +* register the admin panel part of [custom fields](/developer-docs/latest/development/custom-fields.md#registering-a-custom-field-in-the-admin-panel) #### registerPlugin() @@ -180,6 +181,7 @@ The Admin Panel API allows a plugin to take advantage of several small APIs to p | Declare an injection zone | [Injection Zones API](#injection-zones-api) | [`registerPlugin()`](#registerplugin) | [`register()`](#register) | | Add a reducer | [Reducers API](#reducers-api) | [`addReducers()`](#reducers-api) | [`register()`](#register) | | Create a hook | [Hooks API](#hooks-api) | [`createHook()`](#hooks-api) | [`register()`](#register) | +| Register the admin panel part of a custom field | APIs for custom fields (see [custom fields documentation](/developer-docs/latest/development/custom-fields.md)) | `app.customFields.register()` | `register()` | | Add a single link to a settings section | [Settings API](#settings-api) | [`addSettingsLink()`](#addsettingslink) | [`bootstrap()`](#bootstrap) | | Add multiple links to a settings section | [Settings API](#settings-api) | [`addSettingsLinks()`](#addsettingslinks) | [`bootstrap()`](#bootstrap) | | Inject a Component in an injection zone | [Injection Zones API](#injection-zones-api) | [`injectComponent()`](#injection-zones-api) | [`bootstrap()`](#register) | diff --git a/docs/developer-docs/latest/developer-resources/plugin-api-reference/server.md b/docs/developer-docs/latest/developer-resources/plugin-api-reference/server.md index 9e48d601d9..2108272416 100644 --- a/docs/developer-docs/latest/developer-resources/plugin-api-reference/server.md +++ b/docs/developer-docs/latest/developer-resources/plugin-api-reference/server.md @@ -28,7 +28,7 @@ To tap into the Server API, create a `strapi-server.js` file at the root of the ### register() -This function is called to load the plugin, even before the application is actually [bootstrapped](#bootstrap), in order to register [permissions](/developer-docs/latest/plugins/users-permissions.md) or database migrations. +This function is called to load the plugin, before the application is [bootstrapped](#bootstrap), in order to register [permissions](/developer-docs/latest/plugins/users-permissions.md), the server part of [custom fields](/developer-docs/latest/development/custom-fields.md#registering-a-custom-field-on-the-server), or database migrations. **Type**: `Function` diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index 1135a76ab2..e89c7ff826 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -388,6 +388,56 @@ export default { +A plugin's key/value pairs are declared independently in the plugin's files at `./admin/src/translations/[language-name].json`. These key/value pairs can similarly be extended in the `config.translations` key by prefixing the key with the plugin's name (i.e. `[plugin name].[key]: 'value'`) as in the following example: + + + + +```js +// path: ./my-app/src/admin/app.js + +export default { + config: { + locales: ['fr'], + translations: { + fr: { + 'Auth.form.email.label': 'test', + // Translate a plugin's key/value pair by adding the plugin's name as a prefix + // In this case, we translate the "plugin.name" key of plugin "content-type-builder" + "content-type-builder.plugin.name": "Constructeur de Type-Contenu", + }, + }, + }, + bootstrap() {}, +}; +``` + + + + + + +```js +// path: ./my-app/src/admin/app.ts + +export default { + config: { + locales: ['fr'], + translations: { + fr: { + 'Auth.form.email.label': 'test', + // Translate a plugin's key/value pair by adding the plugin's name as a prefix + // In this case, we translate the "plugin.name" key of plugin "content-type-builder" + "content-type-builder.plugin.name": "Constructeur de Type-Contenu", + }, + }, + }, + bootstrap() {}, +}; +``` + + + If more translations files should be added, place them in `./src/admin/extensions/translations` folder. diff --git a/docs/developer-docs/latest/development/backend-customization.md b/docs/developer-docs/latest/development/backend-customization.md index c9a7a0d95c..a19a6320c8 100644 --- a/docs/developer-docs/latest/development/backend-customization.md +++ b/docs/developer-docs/latest/development/backend-customization.md @@ -30,4 +30,4 @@ Each part of Strapi's back end can be customized: - the [responses](/developer-docs/latest/development/backend-customization/requests-responses.md#responses) sent to the application that sent the request, -- and the [webhooks](/developer-docs/latest/development/backend-customization/webhooks.md) that are used to notify other applications of events that occured. +- and the [webhooks](/developer-docs/latest/development/backend-customization/webhooks.md) that are used to notify other applications of events that occurred. diff --git a/docs/developer-docs/latest/development/backend-customization/models.md b/docs/developer-docs/latest/development/backend-customization/models.md index f977c65e34..68bfed19e5 100644 --- a/docs/developer-docs/latest/development/backend-customization/models.md +++ b/docs/developer-docs/latest/development/backend-customization/models.md @@ -124,8 +124,9 @@ Many types of attributes are available: - scalar types (e.g. strings, dates, numbers, booleans, etc.), - Strapi-specific types, such as: - - `media`, for files uploaded through the [Media library](/user-docs/latest/content-types-builder/configuring-fields-content-type.md#media) + - `media` for files uploaded through the [Media library](/user-docs/latest/content-types-builder/configuring-fields-content-type.md#media) - `relation` to describe a [relation](#relations) between content-types + - `customField` to describe [custom fields](#custom-fields) and their specific keys - `component` to define a [component](#components-2) (i.e. a data structure usable in multiple content-types) - `dynamiczone` to define a [dynamic zone](#dynamic-zones) (i.e. a flexible space based on a list of components) - and the `locale` and `localizations` types, only used by the [Internationalization (i18n) plugin](/developer-docs/latest/plugins/i18n.md) @@ -138,7 +139,7 @@ The `type` parameter of an attribute should be one of the following values: | Date types | | | Number types | | | Other generic types | | -| Special types unique to Strapi | | +| Special types unique to Strapi | | | Internationalization (i18n)-related types

_Can only be used if the [i18n plugin](/developer-docs/latest/plugins/i18n.md) is installed_| | #### Validations @@ -514,6 +515,35 @@ The `tableName` key defines the name of the join table. It has to be specified o ::::: +#### Custom fields + +[Custom fields](/developer-docs/latest/development/custom-field.md) extend Strapi’s capabilities by adding new types of fields to content-types. Custom fields are explicitly defined in the [attributes](#model-attributes) of a model with `type: customField`. +Custom fields' attributes also accept: + +Custom fields' attributes also show the following specificities: +- a `customField` attribute whose value acts as a unique identifier to indicate which registered custom field should be used. Its value follows: + - either the `plugin::plugin-name.field-name` format if a plugin created the custom field + - or the `global::field-name` format for a custom field specific to the current Strapi application +- and additional parameters depending on what has been defined when registering the custom field (see [custom fields documentation](/developer-docs/latest/development/custom-fields.md)). + +```json +// path: ./src/api/[apiName]/[content-type-name]/content-types/schema.json + +{ + // … + "attributes": { + "attributeName": { // attributeName would be replaced by the actual attribute name + "type": "customField", + "customField": "plugin::color-picker.color", + "options": { + "format": "hex" + } + } + } + // … +} +``` + #### Components Component fields create a relation between a content-type and a component structure. Components are explicitly defined in the [attributes](#model-attributes) of a model with `type: 'component'` and accept the following additional parameters: diff --git a/docs/developer-docs/latest/development/custom-fields.md b/docs/developer-docs/latest/development/custom-fields.md new file mode 100644 index 0000000000..c9bac2d7ab --- /dev/null +++ b/docs/developer-docs/latest/development/custom-fields.md @@ -0,0 +1,335 @@ +--- +title: Custom fields development - Strapi Developer Docs +description: Learn how you can use custom fields to extend Strapi's content-types capabilities. +sidebarDepth: 3 +canonicalUrl: https://docs.strapi.io/developer-docs/latest/development/custom-fields.html +--- + +# Custom fields + +Custom fields extend Strapi’s capabilities by adding new types of fields to content-types and components. Once created or installed, custom fields can be used in the Content-Type Builder and Content Manager just like built-in fields. + +The present documentation is intended for custom field creators: it describes which APIs and functions developers must use to create a new custom field. The [user guide](/user-docs/latest/plugins/introduction-to-plugins.md#custom-fields) describes how to install and use custom fields from Strapi's admin panel. + +It is recommended that you develop a dedicated [plugin](/developer-docs/latest/development/plugins-development.md) for custom fields. Custom-field plugins include both a server and admin panel part. The custom field must be registered in both parts before it is usable in Strapi's admin panel. + +Once created and used, custom fields are defined like any other attribute in the model's schema. An attribute using a custom field will have its type represented as `customField` (i.e. `type: 'customField'`). Depending on the custom field being used a few additional properties may be present in the attribute's definition (see [models documentation](/developer-docs/latest/development/backend-customization/models.md#custom-fields)). + +::: note NOTES +* Though the recommended way to add a custom field is through creating a plugin, app-specific custom fields can also be registered within the global `register` [function](/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md) found in `src/index.js` and `src/admin/app/js` files. +* Custom fields can only be shared using plugins. +::: + +## Registering a custom field on the server + +::: prerequisites +!!!include(developer-docs/latest/development/snippets/custom-field-requires-plugin.md)!!! +::: + +Strapi's server needs to be aware of all the custom fields to ensure that an attribute using a custom field is valid. + +The `strapi.customFields` object exposes a `register()` method on the `Strapi` instance. This method is used to register custom fields on the server during the plugin's server [register lifecycle](/developer-docs/latest/developer-resources/plugin-api-reference/server.md#register). + +`strapi.customFields.register()` registers one or several custom field(s) on the server by passing an object (or an array of objects) with the following parameters: + +| Parameter | Description | Type | +| ------------------------------ | ------------------------------------------------- | -------- | +| `name` | The name of the custom field | `String` | +| `plugin`

(_optional_) | The name of the plugin creating the custom fields | `String` | +| `type` | The data type the custom field will use | `String` | + +::: note +Currently, custom fields cannot add new data types to Strapi and must use existing, built-in Strapi data types described in the [models' attributes](/developer-docs/latest/development/backend-customization/models.md#model-attributes) documentation. Special data types unique to Strapi, such as relation, media, component, or dynamic zone data types, cannot be used in custom fields. +::: + +::: details Example: Registering an example "color" custom field on the server: + +```js +// path: ./src/plugins/color-picker/strapi-server.js + +module.exports = { + register({ strapi }) { + strapi.customFields.register({ + name: 'color', + plugin: 'color-picker', + type: 'text', + }); + }, +}; +``` + +::: + +## Registering a custom field in the admin panel + +::: prerequisites +!!!include(developer-docs/latest/development/snippets/custom-field-requires-plugin.md)!!! +::: + +Custom fields must be registered in Strapi's admin panel to be available in the Content-type Builder and the Content Manager. + +The `app.customFields` object exposes a `register()` method on the `StrapiApp` instance. This method is used to register custom fields in the admin panel during the plugin's admin [register lifecycle](/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md#register). + +`app.customFields.register()` registers one or several custom field(s) in the admin panel by passing an object (or an array of objects) with the following parameters: + +| Parameter | Description | Type | +| -------------------------------- | ------------------------------------------------------------------------ | --------------------- | +| `name` | Name of the custom field | `String` | +| `pluginId`

(_optional_) | Name of the plugin creating the custom field | `String` | +| `type` | Existing Strapi data type the custom field will use

❗️ Relations, media, components, or dynamic zones cannot be used. | `String` | +| `icon`

(_optional_) | Icon for the custom field | `React.ComponentType` | +| `intlLabel` | Translation for the name | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `intlDescription` | Translation for the description | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `components` | Components needed to display the custom field in the Content Manager (see [components](#components)) | +| `options`

(_optional_) | Options to be used by the Content-type Builder (see [options](#options)) | `Object` | + +::: details Example: Registering an example "color" custom field in the admin panel: + +```jsx +// path: ./src/plugins/color-picker/strapi-admin.js + +register(app) { + app.customFields.register({ + name: "color", + pluginId: "color-picker", // the custom field is created by a color-picker plugin + type: "string", // the color will be stored as a string + intlLabel: { + id: "color-picker.color.label", + defaultMessage: "Color", + }, + intlDescription: { + id: "color-picker.color.description", + defaultMessage: "Select any color", + }, + icon: ColorIcon, + components: { + Input: async () => import(/* webpackChunkName: "input-component" */ "./Input"), + }, + options: { + base: [ + /* + Declare settings to be added to the "Base settings" section + of the field in the Content-Type Builder + */ + { + sectionTitle: { // Add a "Format" settings section + id: 'color-picker.color.section.format', + defaultMessage: 'Format', + }, + items: [ // Add settings items to the section + { + /* + Add a "Color format" dropdown + to choose between 2 different format options + for the color value: hexadecimal or RGBA + */ + intlLabel: { + id: 'color-picker.color.format.label', + defaultMessage: 'Color format', + }, + name: 'options.format', + type: 'select', + value: 'hex', // option selected by default + options: [ // List all available "Color format" options + { + key: 'hex', + value: 'hex', + metadatas: { + intlLabel: { + id: 'color-picker.color.format.hex', + defaultMessage: 'Hexadecimal', + }, + }, + }, + { + key: 'rgba', + value: 'rgba', + metadatas: { + intlLabel: { + id: 'color-picker.color.format.rgba', + defaultMessage: 'RGBA', + }, + }, + }, + ], + }, + ], + }, + ], + advanced: [ + /* + Declare settings to be added to the "Advanced settings" section + of the field in the Content-Type Builder + */ + ], + validator: args => ({ + format: yup.string().required({ + id: 'options.color-picker.format.error', + defaultMessage: 'The color format is required', + }), + }) + }), + }, + }); +} +``` + +::: + +### Components + +`app.customFields.register()` must pass a `components` object with an `Input` React component to use in the Content Manager's edit view. + +::: details Example: Registering an Input component + +```js +// path: ./src/plugins/my-custom-field-plugin/strapi-admin.js + +register(app) { + app.customFields.register({ + // … + components: { + Input: async () => import(/* webpackChunkName: "input-component" */ "./Input"), + } + // … + }); +} +``` + +::: + +::: tip +The `Input` React component receives several props. The [`ColorPickerInput` file](https://github.com/strapi/strapi/blob/features/custom-fields/packages/plugins/color-picker/admin/src/components/ColorPicker/ColorPickerInput/index.js#L10-L21) in the Strapi codebase gives you an example of how they can be used. +::: + + +### Options + +`app.customFields.register()` can pass an additional `options` object with the following parameters: + +| Options parameter | Description | Type | +| -------------- | ------------------------------------------------------------------------------- | ----------------------- | +| `base` | Settings available in the _Base settings_ tab of the field in the Content-type Builder | `Object` or `Array of Objects` | +| `advanced` | Settings available in the _Advanced settings_ tab of the field in the Content-type Builder | `Object` or `Array of Objects` | +| `validator` | Validator function returning an object, used to sanitize input. Uses a [`yup` schema object](https://github.com/jquense/yup/tree/pre-v1). | `Function` | + +Both `base` and `advanced` settings accept an object or an array of objects, each object being a settings section. Each settings section could include: + +- a `sectionTitle` to declare the title of the section as an [`IntlObject`](https://formatjs.io/docs/react-intl/) +- and a list of `items` as an array of objects. + +Each object in the `items` array can contain the following parameters: + +| Items parameter | Description | Type | +| --------------- | ------------------------------------------------------------------ | ---------------------------------------------------- | +| `name` | Label of the input.
Must use the `options.settingName` format. | `String` | +| `description` | Description of the input to use in the Content-type Builder | `String` | +| `intlLabel` | Translation for the label of the input | [`IntlObject`](https://formatjs.io/docs/react-intl/) | +| `type` | Type of the input (e.g., `select`, `checkbox`) | `String` | + + + +::: details Example: Declaring options for an example "color" custom field: + +```jsx +// path: ./src/plugins/my-custom-field-plugin/strapi-admin.js + +register(app) { + app.customFields.register({ + // … + options: { + base: [ + { + intlLabel: { + id: 'color-picker.color.format.label', + defaultMessage: 'Color format', + }, + name: 'options.format', + type: 'select', + value: 'hex', + options: [ + { + key: '__null_reset_value__', + value: '', + metadatas: { + intlLabel: { + id: 'color-picker.color.format.placeholder', + defaultMessage: 'Select a format', + }, + hidden: true, + }, + }, + { + key: 'hex', + value: 'hex', + metadatas: { + intlLabel: { + id: 'color-picker.color.format.hex', + defaultMessage: 'Hexadecimal', + }, + }, + }, + { + key: 'rgba', + value: 'rgba', + metadatas: { + intlLabel: { + id: 'color-picker.color.format.rgba', + defaultMessage: 'RGBA', + }, + }, + }, + ], + }, + ], + advanced: [ + { + sectionTitle: { + id: 'global.settings', + defaultMessage: 'Settings', + }, + items: [ + { + name: 'required', + type: 'checkbox', + intlLabel: { + id: 'form.attribute.item.requiredField', + defaultMessage: 'Required field', + }, + description: { + id: 'form.attribute.item.requiredField.description', + defaultMessage: "You won't be able to create an entry if this field is empty", + }, + }, + { + name: 'private', + type: 'checkbox', + intlLabel: { + id: 'form.attribute.item.privateField', + defaultMessage: 'Private field', + }, + description: { + id: 'form.attribute.item.privateField.description', + defaultMessage: 'This field will not show up in the API response', + }, + }, + ], + }, + ], + validator: args => ({ + format: yup.string().required({ + id: 'options.color-picker.format.error', + defaultMessage: 'The color format is required', + }), + }), + }, + }); +} +``` + +::: + + +::: tip +The Strapi codebase gives an example of how settings objects can be described: check the [`baseForm.js`](https://github.com/strapi/strapi/blob/main/packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js) file for the `base` settings and the [`advancedForm.js`](https://github.com/strapi/strapi/blob/main/packages/core/content-type-builder/admin/src/components/FormModal/attributes/advancedForm.js) file for the `advanced` settings. The base form lists the settings items inline but the advanced form gets the items from an [`attributeOptions.js`](https://github.com/strapi/strapi/blob/main/packages/core/content-type-builder/admin/src/components/FormModal/attributes/attributeOptions.js) file. +::: diff --git a/docs/developer-docs/latest/development/plugins-development.md b/docs/developer-docs/latest/development/plugins-development.md index 0f6a7197e1..a9c565f8c7 100644 --- a/docs/developer-docs/latest/development/plugins-development.md +++ b/docs/developer-docs/latest/development/plugins-development.md @@ -71,6 +71,10 @@ Plugins created using the preceding directions are located in the `plugins` dire During plugin development it is helpful to use the `--watch-admin` flag to toggle hot reloading of the admin panel. See the [Admin panel customization](/developer-docs/latest/development/admin-customization.md) documentation for more details. (TypeScript specific) While developing your plugin, you can run `yarn develop` or `npm run develop` in the plugin directory to watch the changes to the TypeScript server files. ::: +::: tip +Check [this blog post](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-publish-on-npm-6-6) to learn how to publish your Strapi plugin on npm. +::: + ## Add features to a plugin Strapi provides programmatic APIs for plugins to hook into some of Strapi's features. @@ -78,3 +82,8 @@ Strapi provides programmatic APIs for plugins to hook into some of Strapi's feat Plugins can register with the server and/or the admin panel, by looking for entry point files at the root of the package: - `strapi-server.js` for the Server (see [Server API](/developer-docs/latest/developer-resources/plugin-api-reference/server.md)), - `strapi-admin.js` for the admin panel (see [Admin Panel API](/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md)). + +::: strapi Custom fields plugins +Plugins can also be used to add [custom fields](/developer-docs/latest/development/custom-fields.md) to Strapi. +::: + diff --git a/docs/developer-docs/latest/development/plugins-extension.md b/docs/developer-docs/latest/development/plugins-extension.md index e09c65b09e..f415ad31b5 100644 --- a/docs/developer-docs/latest/development/plugins-extension.md +++ b/docs/developer-docs/latest/development/plugins-extension.md @@ -48,7 +48,7 @@ A plugin's Content-Types can be extended in 2 ways: using the programmatic inter The final schema of the content-types depends on the following loading order: 1. the content-types of the original plugin, -2. the content-types overriden by the declarations in the [schema](/developer-docs/latest/development/backend-customization/models.md#model-schema) defined in `./src/extensions/plugin-name/content-types/content-type-name/schema.json` +2. the content-types overridden by the declarations in the [schema](/developer-docs/latest/development/backend-customization/models.md#model-schema) defined in `./src/extensions/plugin-name/content-types/content-type-name/schema.json` 3. the content-types declarations in the [`content-types` key exported from `strapi-server.js`](/developer-docs/latest/developer-resources/plugin-api-reference/server.md#content-types) 4. the content-types declarations in the [`register()` function](/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md#register) of the Strapi application diff --git a/docs/developer-docs/latest/development/snippets/custom-field-requires-plugin.md b/docs/developer-docs/latest/development/snippets/custom-field-requires-plugin.md new file mode 100644 index 0000000000..7828ce9979 --- /dev/null +++ b/docs/developer-docs/latest/development/snippets/custom-field-requires-plugin.md @@ -0,0 +1 @@ +Registering a custom field through a plugin requires creating and enabling a plugin (see [Plugins development](/developer-docs/latest/development/plugins-development.md#create-a-plugin)). diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 2a742a6591..e7c38468f9 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -74,7 +74,6 @@ To use `ts:generate-types`run the following code in a terminal at the project ro ```sh npm run strapi ts:generate-types --verbose #optional flag - ``` @@ -83,7 +82,6 @@ npm run strapi ts:generate-types --verbose #optional flag ```sh yarn strapi ts:generate-types --verbose #optional flag - ``` @@ -121,11 +119,9 @@ app.start(); The `strapi.compile()` function should be mostly used for developing tools that need to start a Strapi instance and detect whether the project includes TypeScript code. `strapi.compile()` automatically detects the project language. If the project code contains any TypeScript code, `strapi.compile()` compiles the code and returns a context with specific values for the directories that Strapi requires: ```js - const strapi = require('@strapi/strapi'); strapi.compile().then(appContext => strapi(appContext).start()); - ``` ## Add TypeScript support to an existing Strapi project @@ -229,4 +225,4 @@ yarn develop -After completing the preceding procedure a `dist` directory will be added at the project route and the project has access to the same TypeScript features as a new TypeScript-supported Strapi project. \ No newline at end of file +After completing the preceding procedure a `dist` directory will be added at the project route and the project has access to the same TypeScript features as a new TypeScript-supported Strapi project. diff --git a/docs/developer-docs/latest/getting-started/introduction.md b/docs/developer-docs/latest/getting-started/introduction.md index 62d7089af8..a0bf5325a9 100644 --- a/docs/developer-docs/latest/getting-started/introduction.md +++ b/docs/developer-docs/latest/getting-started/introduction.md @@ -9,7 +9,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/getting-started/intro This documentation contains all technical documentation related to the setup, deployment, update and customization of your Strapi application. ::: strapi Can't wait to start using Strapi? -You can directly head to the [Quick Start](quick-start.md)!
If demos are more your thing, we have a [video demo](https://youtu.be/zd0_S_FPzKg), or you can request a [live demo](https://strapi.io/demo)! +You can directly head to the [Quick Start](quick-start.md)!
If demos are more your thing, we have a [video demo](https://youtu.be/h9vETeRiulY), or you can request a [live demo](https://strapi.io/demo)! ::: The original purpose of the project was to help Boot**strap** your **API**: that's how Strapi was created. Now, Strapi is an open-source headless CMS that gives developers the freedom to choose their favorite tools and frameworks and allows editors to manage and distribute their content using their application's admin panel. Based on a plugin system, Strapi is a flexible CMS whose admin panel and API are extensible - and which every part is customizable to match any use case. Strapi also has a built-in user system to manage in detail what the administrators and end users have access to. @@ -28,7 +28,7 @@ As it goes hand in hand with the open-source ecosystem, Strapi is open to contri ## Strapi Community -Strapi is a community-oriented project with an emphasis on transparency. The Strapi team has at heart to share their vision and build the future of Strapi with the Strapi community. This is why the [roadmap](https://portal.productboard.com/strapi) is open: as all insights are very important and will help steer the project in the right direction, any community member is most welcome to share ideas and opinions there. +Strapi is a community-oriented project with an emphasis on transparency. The Strapi team has at heart to share their vision and build the future of Strapi with the Strapi community. This is why the [roadmap](https://feedback.strapi.io/) is open: as all insights are very important and will help steer the project in the right direction, any community member is most welcome to share ideas and opinions there. Community members also take great part in providing the whole community a plethora of resources about Strapi. You can find [tutorials](https://strapi.io/tutorials/) on the Strapi website, where you can also create your own. Also, as an open-source project, the technical documentation of Strapi is open to contributions (see [Open-source & Contribution](#open-source-contribution)). diff --git a/docs/developer-docs/latest/getting-started/quick-start.md b/docs/developer-docs/latest/getting-started/quick-start.md index c40d5dbc6c..b4ebb0eae0 100644 --- a/docs/developer-docs/latest/getting-started/quick-start.md +++ b/docs/developer-docs/latest/getting-started/quick-start.md @@ -63,7 +63,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/getting-started/quick font-size: 110%; width: 50%; border-radius: 0 8px 8px 0 !important; - border: solid 1px #bbbbba !important; + border: solid 1px #C0C0CF !important; } .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:first-child { @@ -72,8 +72,8 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/getting-started/quick } .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:not(.is-active) { - background-color: #f8f8f8; - color: #787878; + background-color: #F6F6F9; + color: #8E8EA9; } .image--50 { @@ -134,7 +134,7 @@ The quick start installation sets up Strapi with a SQLite database. Other databa Once the installation is complete, your browser automatically opens a new tab. -By completing the form, you create your own account. Once done, you become the first administator user of this Strapi application. Welcome aboard, commander! +By completing the form, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander! You now have access to the [admin panel](http://localhost:1337/admin): @@ -351,7 +351,7 @@ During the installation, when terminal asks `Choose your installation type`: sel Once the installation is complete, your browser automatically opens a tab at ([http://localhost:1337/admin/auth/register-admin](http://localhost:1337/admin/auth/register-admin)). It's for Strapi's admin panel, the back end of your application. -By completing the form in the admin panel tab, you create your own account. Once done, you become the first administator user of this Strapi application. Welcome aboard, commander! +By completing the form in the admin panel tab, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander! Now, open [http://localhost:3000](http://localhost:3000) in another tab. This is the front end of your application, and you can already see the Next blog in action. diff --git a/docs/developer-docs/latest/guides/count-graphql.md b/docs/developer-docs/latest/guides/count-graphql.md index a6767774e7..3926e8058a 100644 --- a/docs/developer-docs/latest/guides/count-graphql.md +++ b/docs/developer-docs/latest/guides/count-graphql.md @@ -78,7 +78,7 @@ And tada, you can now request the `count` of your Content Type. - Count all restaurants that have `_3rd` as district value. -Based on the [FoodAdvisor](https://github.com/strapi/foodadvisor) restraurant model. +Based on the [FoodAdvisor](https://github.com/strapi/foodadvisor) restaurant model. ``` { diff --git a/docs/developer-docs/latest/guides/secure-your-app.md b/docs/developer-docs/latest/guides/secure-your-app.md index 7d787063d4..4bb3eb5c06 100644 --- a/docs/developer-docs/latest/guides/secure-your-app.md +++ b/docs/developer-docs/latest/guides/secure-your-app.md @@ -38,7 +38,7 @@ npm install sqreen :::: -## Start your application programmaticaly +## Start your application programmatically We will have to require the Sqreen node_module in the file we use to start Strapi. diff --git a/docs/developer-docs/latest/guides/unit-testing.md b/docs/developer-docs/latest/guides/unit-testing.md index a5002baec5..3b4b071901 100644 --- a/docs/developer-docs/latest/guides/unit-testing.md +++ b/docs/developer-docs/latest/guides/unit-testing.md @@ -106,7 +106,7 @@ The whole file will look like this: ### Strapi instance -In order to test anything we need to have a strapi instance that runs in the testing eviroment, +In order to test anything we need to have a strapi instance that runs in the testing environment, basically we want to get instance of strapi app as object, similar like creating an instance for [process manager](process-manager.md). These tasks require adding some files - let's create a folder `tests` where all the tests will be put and inside it, next to folder `helpers` where main Strapi helper will be in file strapi.js. diff --git a/docs/developer-docs/latest/plugins/email.md b/docs/developer-docs/latest/plugins/email.md index 00eafa7207..3c4fc8d572 100644 --- a/docs/developer-docs/latest/plugins/email.md +++ b/docs/developer-docs/latest/plugins/email.md @@ -121,4 +121,4 @@ module.exports = { } } } -``` \ No newline at end of file +``` diff --git a/docs/developer-docs/latest/plugins/upload.md b/docs/developer-docs/latest/plugins/upload.md index fa6b5cb2ad..048e68b2e2 100644 --- a/docs/developer-docs/latest/plugins/upload.md +++ b/docs/developer-docs/latest/plugins/upload.md @@ -142,11 +142,12 @@ In addition to the middleware configuration, you can pass the `sizeLimit`, which ```js -// path: ./config/plugins.js +// path: ./config/middlewares.js -module.exports = { +export default { // ... - upload: { + { + name: "strapi::body", config: { providerOptions: { sizeLimit: 250 * 1024 * 1024 // 256mb in bytes diff --git a/docs/developer-docs/latest/plugins/users-permissions.md b/docs/developer-docs/latest/plugins/users-permissions.md index 89efef2eca..8a57c95d11 100644 --- a/docs/developer-docs/latest/plugins/users-permissions.md +++ b/docs/developer-docs/latest/plugins/users-permissions.md @@ -255,7 +255,7 @@ export default ({ env }) => ({ :::tip -Later on you will give this url to your provider.
For development, some providers accept the use of localhost urls but many don't. In this case we recommand to use [ngrok](https://ngrok.com/docs) (`ngrok http 1337`) that will make a proxy tunnel from a url it created to your localhost url (ex: `url: env('', 'https://5299e8514242.ngrok.io'),`). +Later on you will give this url to your provider.
For development, some providers accept the use of localhost urls but many don't. In this case we recommend to use [ngrok](https://ngrok.com/docs) (`ngrok http 1337`) that will make a proxy tunnel from a url it created to your localhost url (ex: `url: env('', 'https://5299e8514242.ngrok.io'),`). ::: #### Setting up the provider - examples diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md index a8764652cc..95149c290f 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md @@ -17,6 +17,11 @@ New API tokens are generated from the [admin panel](/user-docs/latest/settings/m When performing a request to Strapi's [REST API](/developer-docs/latest/developer-resources/database-apis-reference/rest-api.md), the API token should be added to the request's `Authorization` header with the following syntax: `bearer your-api-token`. +::: note + +Read-only API tokens can only access the `find` and `findOne` functions. +::: + ## Configuration New API tokens are generated using a salt. This salt is automatically generated by Strapi and stored in `.env` as `API_TOKEN_SALT`. diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.md index 8de204304b..22b0aebe15 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.md @@ -1,6 +1,6 @@ --- title: Cron jobs - Strapi Developer Docs -description: Strapi allows you to configure cron jobs for execution at specific dates and times, with optional reccurence rules. +description: Strapi allows you to configure cron jobs for execution at specific dates and times, with optional reoccurrence rules. canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/cronjobs.html --- diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md index be008f5486..c1188c509a 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md @@ -89,7 +89,7 @@ export default ({ env }) => ({ ### Casting environment variables -The `env()` utility can be used to cast environment varibles to different types: +The `env()` utility can be used to cast environment variables to different types: ```js // Returns the env if defined without casting it diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md index 191db5e954..cf20d7977e 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/functions.md @@ -138,6 +138,7 @@ It can be used to: - [extend plugins](/developer-docs/latest/development/plugins-extension.md#extending-a-plugin-s-interface) - extend [content-types](/developer-docs/latest/development/backend-customization/models.md) programmatically - load some [environment variables](/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md) +- register a [custom field](/developer-docs/latest/development/custom-fields.md) that would be used only by the current Strapi application. ## Bootstrap diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/plugins.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/plugins.md index 3efecc2157..3b35d542ef 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/plugins.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/plugins.md @@ -86,7 +86,7 @@ The [GraphQL plugin](/developer-docs/latest/plugins/graphql.md) has the followin | Parameter | Description | Type | Default | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | | `apolloServer` | Additional configuration for [`ApolloServer`](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#apolloserver). | Object | `{}` | -| `artifacts` | Object containing filepaths, defining where to store generated articats. Can include the following properties: Only works if `generateArtifacts` is set to `true`. | Object | | +| `artifacts` | Object containing filepaths, defining where to store generated artifacts. Can include the following properties: Only works if `generateArtifacts` is set to `true`. | Object | | | `defaultLimit` | Default value for [the `pagination[limit]` parameter](/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.md#pagination-by-offset) used in API calls | Integer | 100 | | `depthLimit` | Limits the [complexity of GraphQL queries](https://www.npmjs.com/package/graphql-depth-limit). | Integer | `10` | | `endpoint` | The URL path on which the plugin is exposed | String | `/graphql` | @@ -129,8 +129,12 @@ export default () => ({ graphql: { enabled: true, config: { + playgroundAlways: false, defaultLimit: 10, - maxLimit: 20 + maxLimit: 20, + apolloServer: { + tracing: true, + }, } } }) diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/public-assets.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/public-assets.md index 0615a5151b..1b28553af6 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/public-assets.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/public-assets.md @@ -1,6 +1,6 @@ --- title: Public assets configuration - Strapi Developer Docs -description: The public folder of Strapi is used for static files that you want to make accesible to the outside world. +description: The public folder of Strapi is used for static files that you want to make accessible to the outside world. canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/public-assets.html --- diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.md index 2bc004ce4b..0c6ecd3c8d 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.md @@ -6,10 +6,6 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid # Role-Based Access Control -:::caution 🚧 This API is considered unstable for now. -
-::: - Role-Based Access Control (RBAC) is an approach to restricting access to some users. In a Strapi application, users of the admin panel are administrators. Their roles and permissions are [configured in the admin panel](/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md). The Community Edition of Strapi offers 3 default roles (Author, Editor, and Super Admin). To go further, creating custom conditions for any type of permission is also possible. This requires an Enterprise Edition with at minimum a Bronze licence plan. ## Declaring new conditions diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.md index 7d40af56a0..aa810391a7 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.md @@ -1,6 +1,6 @@ --- title: Single Sign-On (SSO) - Strapi Developer Docs -description: Strapi's SSO allows you to configure additional sign-in and sign-up methods for your administration panel. It requires an Entreprise Edition with a Gold plan. +description: Strapi's SSO allows you to configure additional sign-in and sign-up methods for your administration panel. It requires an Enterprise Edition with a Gold plan. sidebarDepth: 3 canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.html --- @@ -111,7 +111,7 @@ Its signature is the following: `void done(error: any, data: object);` and it fo - If `error` is not set to `null`, then the data sent is ignored, and the controller will throw an error. - If the SSO's auto-registration feature is disabled, then the `data` object only need to be composed of an `email` property. -- If the SSO's auto-registration feature is enabled, then you will need to define (in addition to the `email`) either a `username` property or both `firstname` and `lastname` within the `data` oject. +- If the SSO's auto-registration feature is enabled, then you will need to define (in addition to the `email`) either a `username` property or both `firstname` and `lastname` within the `data` object. ### Adding a provider diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment.md b/docs/developer-docs/latest/setup-deployment-guides/deployment.md index 9aa6a0329b..f6b2d08147 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment.md @@ -52,7 +52,7 @@ Deploying databases along with Strapi is covered in the [databases guide](/devel | Debian | 10.x | 11.x | | CentOS/RHEL | 8.x | 9.x | | macOS | 10.15 | 11.0 | -| Windows Desktop | 10 | 12 | +| Windows Desktop | 10 | 11 | | Windows Server | 2019 | 2022 | ### Application Configuration diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/amazon-aws.md b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/amazon-aws.md index cef7e464c6..5881919f52 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/amazon-aws.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/amazon-aws.md @@ -489,6 +489,10 @@ module.exports = { script: 'npm', // For this example we're using npm, could also be yarn args: 'start', // Script to start the Strapi server, `start` by default env: { + APP_KEYS: 'your app keys', // you can find it in your project .env file. + API_TOKEN_SALT: 'your api token salt', + ADMIN_JWT_SECRET: 'your admin jwt secret', + JWT_SECRET: 'your jwt secret', NODE_ENV: 'production', DATABASE_HOST: 'your-unique-url.rds.amazonaws.com', // database Endpoint under 'Connectivity & Security' tab DATABASE_PORT: '5432', diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.md b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.md index 7719dee544..7bdfa9b0c6 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/google-app-engine.md @@ -265,6 +265,10 @@ Deploy so that the server app includes the dependency from `package.json`. Follow the [documentation of the plugin](https://github.com/Lith/strapi-provider-upload-google-cloud-storage/blob/master/README.md) for the full configuration. +::: note +If thumbnails fail to load in the Media Library, try setting `publicFiles: true` in the upload provider `config` object in the `plugins.js` configuration file. +::: + ### Post-setup configuration **CORS** diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.md b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.md index 02731c97b1..cfcb8d4b28 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.md @@ -308,6 +308,10 @@ heroku config:set ADMIN_JWT_SECRET=$(cat .env | grep ADMIN_JWT_SECRET | cut -d= heroku config:set JWT_SECRET=$(cat .env | grep -w JWT_SECRET | cut -d= -f2) ``` +:::tip +On Windows, variables can be set manually by running the `heroku config:set VARIABLE=your-key-here` for each variable. +::: + The following `openssl` commands will generate random new secrets (Mac and Linux only): ```bash @@ -344,7 +348,7 @@ yarn add pg :::::: -### 8. Commit your changes +### 7. Commit your changes `Path: ./my-project/` @@ -353,7 +357,7 @@ git add . git commit -m "Update database config" ``` -### 9. Update Yarn lockfile +### 8. Update Yarn lockfile `Path: ./my-project/` @@ -361,7 +365,7 @@ git commit -m "Update database config" yarn install ``` -### 10. Commit your changes +### 9. Commit your changes `Path: ./my-project/` @@ -370,7 +374,7 @@ git add yarn.lock git commit -m "Updated Yarn lockfile" ``` -### 11. Deploy +### 10. Deploy `Path: ./my-project/` diff --git a/docs/developer-docs/latest/update-migration-guides/migration-guides.md b/docs/developer-docs/latest/update-migration-guides/migration-guides.md index 9d4dbe5a01..9a1556096c 100644 --- a/docs/developer-docs/latest/update-migration-guides/migration-guides.md +++ b/docs/developer-docs/latest/update-migration-guides/migration-guides.md @@ -19,6 +19,7 @@ Migrations are necessary when upgrades to Strapi include breaking changes. The m - [Migration guide from 4.0.6+ to 4.1.8](migration-guides/v4/migration-guide-4.0.6-to-4.1.8.md) - [Migration guide from 4.1.8+ to 4.1.10](migration-guides/v4/migration-guide-4.1.8-to-4.1.10.md) - [Migration guide from 4.2.x to 4.3.x](migration-guides/v4/migration-guide-4.2.x-to-4.3.x.md) +- [Migration guide from 4.3.6 to 4.3.7](migration-guides/v4/migration-guide-4.3.6-to-4.3.7.md) ## v3 to v4 migration guides diff --git a/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.2.x-to-4.3.x.md b/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.2.x-to-4.3.x.md index 7198dd5c28..01fb59af80 100644 --- a/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.2.x-to-4.3.x.md +++ b/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.2.x-to-4.3.x.md @@ -6,7 +6,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/update-migration-guid # v4.2.x to v4.3.x migration guide -The Strapi v4.2.x to v4.3.x migration guide upgrades versions of v4.2.x and above to v4.3.x. This migration guide is needed for all users who are using the default SQLite database config in their application. The migration to 4.3.x consists of 3 steps: +The Strapi v4.2.x to v4.3.x migration guide upgrades versions of v4.2.x and above to v4.3.x. This migration guide is needed for all TypeScript users who are using the default SQLite database configuration in their application. The migration to 4.3.3 consists of 3 steps: - Upgrading the application dependencies - Updating the database configuration script @@ -18,9 +18,9 @@ The Strapi v4.2.x to v4.3.x migration guide upgrades versions of v4.2.x and abov Stop the server before starting the upgrade. At the time of writing this, the latest version of Strapi is v4.3.3. ::: -1. Upgrade all of the Strapi packages in the `package.json` to `4.3.3`: +1. Upgrade all of the Strapi packages in the `package.json` to `4.3.3` or higher: -```jsx +```json // path: package.json { @@ -45,16 +45,16 @@ If the operation doesn't work, try removing your `yarn.lock` or `package-lock.js ## Updating the database configuration script -This step is only required if you use the default SQLite database configuration. +This step is only required if you use the default SQLite database configuration in a TypeScript project. -To make sure you don't lose your data everytime the development server restarts, you need to make a modification to the `/config/database.js` file. This modification will tell Strapi to use the correct file for your database as per the v4.3.x update. +To make sure you don't lose your data every time the development server restarts, you need to make a modification to the `./config/database.ts` file. This modification tells Strapi to use the correct file for your database. To change the script: -1. In the `./config/database.js` file, Identify the default SQLite database configuration. -2. Copy and paste the following line to the replace the `filename` key of the sqlite configuration: +1. In the `./config/database.ts` file, Identify the default SQLite database configuration. +2. Copy and paste the following line to the replace the `filename` key of the SQLite configuration: -```js +```ts filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')), ``` diff --git a/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.3.6-to-4.3.7.md b/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.3.6-to-4.3.7.md new file mode 100644 index 0000000000..aca8ec90d1 --- /dev/null +++ b/docs/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.3.6-to-4.3.7.md @@ -0,0 +1,67 @@ +--- +title: Migrate from 4.3.6 to 4.3.7 - Strapi Developer Docs +description: Learn how you can migrate your Strapi application from 4.3.6 to 4.3.7. +canonicalUrl: https://docs.strapi.io/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.3.6-to-4.3.7.html +--- + +# v4.3.6 to v4.3.7 migration guide + +The Strapi v4.3.6 to v4.3.7 migration guide upgrades v4.3.6 to v4.3.7. The migration changes the SQLite database package from `sqlite3` to `better-sqlite3`. The migration guide consists of: + +- upgrading the application dependencies, +- changing the `sqlite3` package to `better-sqlite3`, +- reinitializing the application. + +:::caution + [Plugins extension](/developer-docs/latest/plugins/users-permissions.md) that create custom code or modify existing code, will need to be updated and compared to the changes in the repository. Not updating the plugin extensions could break the application. +::: + +## Upgrading the application dependencies + +:::prerequisites +Stop the server before starting the upgrade. +::: + +1. Upgrade all of the Strapi packages in `package.json` to `4.3.7`: + +```json +// path: package.json + +{ + // ... + "dependencies": { + "@strapi/strapi": "4.3.7", + "@strapi/plugin-users-permissions": "4.3.7", + "@strapi/plugin-i18n": "4.3.7", + // ... + } +} +``` + +2. Change the `sqlite3` package to `better-sqlite3` version `7.4.6` in `package.json`: + +```json{9} +// path: package.json + +{ + // ... + "dependencies": { + "@strapi/strapi": "4.3.7", + "@strapi/plugin-users-permissions": "4.3.7", + "@strapi/plugin-i18n": "4.3.7", + "better-sqlite3": "7.4.6" + // ... + } +} + +``` + +3. Save the edited `package.json` file. + +4. Run either `yarn` or `npm install` to install the new version. + +::: tip +If the operation doesn't work, try removing your `yarn.lock` or `package-lock.json`. If that doesn't help, remove the `node_modules` folder as well and try again. +::: + +!!!include(developer-docs/latest/update-migration-guides/migration-guides/v4/snippets/Rebuild-and-start-snippet.md)!!! diff --git a/docs/developer-docs/latest/update-migration-guides/update-version.md b/docs/developer-docs/latest/update-migration-guides/update-version.md index 9d293366e0..16ea57a941 100644 --- a/docs/developer-docs/latest/update-migration-guides/update-version.md +++ b/docs/developer-docs/latest/update-migration-guides/update-version.md @@ -28,10 +28,10 @@ Strapi periodically releases code improvements through upgrades. Upgrades contai { // ... "dependencies": { - "@strapi/strapi": "4.0.7", - "@strapi/plugin-users-permissions": "4.0.7", - "@strapi/plugin-i18n": "4.0.7", - "sqlite3": "5.0.2" + "@strapi/strapi": "4.4.0", + "@strapi/plugin-users-permissions": "4.3.9", + "@strapi/plugin-i18n": "4.4.0", + "better-sqlite3": "7.4.6" // ... } } diff --git a/docs/package.json b/docs/package.json index a94cb227ca..963f98e566 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "strapi-docs", - "version": "4.3.9", + "version": "4.4.0", "main": "index.js", "scripts": { "dev": "yarn create:config-file && vuepress dev", diff --git a/docs/user-docs/latest/assets/content-types-builder/fields-selection.png b/docs/user-docs/latest/assets/content-types-builder/fields-selection.png index 6d8b4ca52f..b3841a48d9 100644 Binary files a/docs/user-docs/latest/assets/content-types-builder/fields-selection.png and b/docs/user-docs/latest/assets/content-types-builder/fields-selection.png differ diff --git a/docs/user-docs/latest/assets/settings/settings_api-token-custom.png b/docs/user-docs/latest/assets/settings/settings_api-token-custom.png new file mode 100644 index 0000000000..cf6af9d060 Binary files /dev/null and b/docs/user-docs/latest/assets/settings/settings_api-token-custom.png differ diff --git a/docs/user-docs/latest/assets/settings/settings_api-token.png b/docs/user-docs/latest/assets/settings/settings_api-token.png index a74991caa5..847fcd2369 100644 Binary files a/docs/user-docs/latest/assets/settings/settings_api-token.png and b/docs/user-docs/latest/assets/settings/settings_api-token.png differ diff --git a/docs/user-docs/latest/content-manager/saving-and-publishing-content.md b/docs/user-docs/latest/content-manager/saving-and-publishing-content.md index 5d72103d52..50041a724d 100644 --- a/docs/user-docs/latest/content-manager/saving-and-publishing-content.md +++ b/docs/user-docs/latest/content-manager/saving-and-publishing-content.md @@ -1,5 +1,5 @@ --- -title: Saving & Publishishing content - Strapi User Guide +title: Saving & Publishing content - Strapi User Guide description: Instructions to manage content throughout its whole lifecycle, from the draft version to the deletion of the obsolete content. canonicalUrl: https://docs.strapi.io/user-docs/latest/content-manager/saving-and-publishing-content.html --- diff --git a/docs/user-docs/latest/content-manager/writing-content.md b/docs/user-docs/latest/content-manager/writing-content.md index 06767c7021..0d4a77bb89 100644 --- a/docs/user-docs/latest/content-manager/writing-content.md +++ b/docs/user-docs/latest/content-manager/writing-content.md @@ -30,6 +30,10 @@ To write or edit content: | Media | 1. Click the media area.
2. Choose an asset from the [Media Library](/user-docs/latest/media-library/introduction-to-media-library.md) or from a [folder](/user-docs/latest/media-library/organizing-assets-with-folders.md) if you created some, or click the **Add more assets** button to add a new file to the Media Library.

💡 It is possible to drag and drop the chosen file in the media area. | | JSON | Write your content, in JSON format, in the code textbox. | | UID | Write a unique identifier in the textbox. A "Regenerate" button, displayed on the right of the box, allows to automatically generate a UID based on the content-type name. | +::: note +Filling out a [custom field](/user-docs/latest/content-types-builder/configuring-fields-content-type.md#custom-fields) depends on the type of content handled by the field. Please refer to the dedicated documentation for each custom field hosted on the [Marketplace](https://market.strapi.io). + +::: ### Components diff --git a/docs/user-docs/latest/content-types-builder/configuring-fields-content-type.md b/docs/user-docs/latest/content-types-builder/configuring-fields-content-type.md index 21404e4836..ff327ec9c6 100644 --- a/docs/user-docs/latest/content-types-builder/configuring-fields-content-type.md +++ b/docs/user-docs/latest/content-types-builder/configuring-fields-content-type.md @@ -13,16 +13,19 @@ canonicalUrl: https://docs.strapi.io/user-docs/latest/content-types-builder/conf Content-types are composed of one or several fields. Each field is designed to contain specific kind of data, filled up in the Content Manager (see [Writing content](/user-docs/latest/content-manager/writing-content.md)). -In the Content-type Builder, fields can be added at the creation of a new content-type or component, or afterward when a content-type or component is edited or updated. The following documentation lists all existing regular fields but also tackles the specificities of components and dynamic zones. For each, you will find a definition, explanation of the form they take once in the Content Manager, and instructions to configure them. +In the Content-type Builder, fields can be added at the creation of a new content-type or component, or afterward when a content-type or component is edited or updated. The following documentation lists all existing regular fields but also tackles the specificities of custom fields, components, and dynamic zones. For each, you will find a definition, explanation of the form they take once in the Content Manager, and instructions to configure them. ::: note -Depending on what content-type or component is being created or edited, not all fields -including components and dynamic zones- are always available. +Depending on which content-type or component is being created or edited, not all fields — including components and dynamic zones — are always available. ::: + Field selection ## Regular fields +Regular fields are Strapi's default, built-in types of fields. Regular fields are listed in the _Default_ tab when selecting a field for a content-type. + ### Text The Text field displays a textbox that can contain small text. This field can be used for titles, descriptions, etc. @@ -392,6 +395,13 @@ The UID field displays a field that sets a unique identifier, optionally based o :::: + +## Custom fields + +Custom fields are a way to extend Strapi’s capabilities by adding new types of fields to content-types or components. Once installed (see [Marketplace](/user-docs/latest/plugins/installing-plugins-via-marketplace.md) documentation), custom fields are listed in the _Custom_ tab when selecting a field for a content-type. + +Each custom field type can have basic and advanced settings. The [Marketplace](https://market.strapi.io/) lists available custom fields, and hosts dedicated documentation for each custom field, including specific settings. + ## Components Components are a combination of several fields. Components allow to create reusable sets of fields, that can be quickly added to content-types, dynamic zones but also nested into other components. diff --git a/docs/user-docs/latest/media-library/introduction-to-media-library.md b/docs/user-docs/latest/media-library/introduction-to-media-library.md index 3a9a22b303..f2e7f9e449 100644 --- a/docs/user-docs/latest/media-library/introduction-to-media-library.md +++ b/docs/user-docs/latest/media-library/introduction-to-media-library.md @@ -47,4 +47,4 @@ When active, filters are displayed next to the **Filters** button. They can be r ![Sort](../assets/media-library/media-library_sort.png) -Just above the list of folders and assets, on the left side of the interface, a **Sort by** button is diplayed. It allows to display assets by upload date, alphabetical order or date of update. Click on the button and select an option in the list to automatically display the sorted assets. +Just above the list of folders and assets, on the left side of the interface, a **Sort by** button is displayed. It allows to display assets by upload date, alphabetical order or date of update. Click on the button and select an option in the list to automatically display the sorted assets. diff --git a/docs/user-docs/latest/plugins/installing-plugins-via-marketplace.md b/docs/user-docs/latest/plugins/installing-plugins-via-marketplace.md index 40757a4351..0858c17080 100644 --- a/docs/user-docs/latest/plugins/installing-plugins-via-marketplace.md +++ b/docs/user-docs/latest/plugins/installing-plugins-via-marketplace.md @@ -1,6 +1,6 @@ --- -title: Installing plugins via the Marketplace - Strapi User Guide -description: Instructions to install new plugins in a Strapi application via the Marketplace. +title: Using the Marketplace - Strapi User Guide +description: Instructions to install new plugins and providers in a Strapi application via the Marketplace. canonicalUrl: https://docs.strapi.io/user-docs/latest/plugins/installing-plugins-via-marketplace.html --- @@ -9,7 +9,7 @@ canonicalUrl: https://docs.strapi.io/user-docs/latest/plugins/installing-plugins The Marketplace is where users can find additional plugins to customize Strapi applications, and additional [providers](./introduction-to-plugins.md#providers) to extend plugins. The Marketplace is located in the admin panel, indicated by ![Marketplace icon](../assets/icons/marketplace.svg) _Marketplace_. In the Marketplace, users can browse or search for plugins and providers, link to detailed descriptions for each, and submit new plugins and providers. ::: strapi In-app Marketplace vs. Market website -The Marketplace in the admin panel only displays v4 plugins, but all plugins for all Strapi versions are discoverable in the [Strapi Market](https://market.strapi.io). +The Marketplace in the admin panel only displays v4 plugins, but all plugins for all Strapi versions are discoverable in the [Strapi Market](https://market.strapi.io). Keep in mind that v3 and v4 plugins are not cross-compatible, but that providers are compatible both with v3 and v4 plugins. ::: diff --git a/docs/user-docs/latest/plugins/introduction-to-plugins.md b/docs/user-docs/latest/plugins/introduction-to-plugins.md index e5a34ce22f..c22d7d32cb 100644 --- a/docs/user-docs/latest/plugins/introduction-to-plugins.md +++ b/docs/user-docs/latest/plugins/introduction-to-plugins.md @@ -34,3 +34,9 @@ Currently, the only plugins designed to work with providers are the: * [Email plugin](/developer-docs/latest/plugins/email.md), and * Media Library plugin (implemented via the [Upload plugin](/developer-docs/latest/plugins/upload.md)). + +## Custom fields + +Some plugins can add _custom fields_ to Strapi. Custom fields are a way to extend Strapi’s capabilities by adding new types of fields to content-types or components. + +Once added to Strapi (see [Marketplace](/user-docs/latest/plugins/installing-plugins-via-marketplace.md)), custom fields can be created in the [Content-type Builder](/user-docs/latest/content-types-builder/configuring-fields-content-type.md#custom-fields) and used in the [Content Manager](/user-docs/latest/content-manager/writing-content.md). diff --git a/docs/user-docs/latest/settings/managing-global-settings.md b/docs/user-docs/latest/settings/managing-global-settings.md index 7c34896156..ea0e2fdbef 100644 --- a/docs/user-docs/latest/settings/managing-global-settings.md +++ b/docs/user-docs/latest/settings/managing-global-settings.md @@ -100,34 +100,54 @@ To configure the Media Library settings: ## Managing API tokens -API tokens allow users to authenticate their Content API queries (see [Developer Documentation](/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md)). Administrators can manage API tokens through the *Global settings > API Tokens* sub-section of the settings interface. +::: prerequisites +* Administrators can create, read, update, or delete API tokens only if proper permissions are granted (see [Configuring administrator roles](/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md#plugins-and-settings)). +* The *Global settings > API Tokens* sub-section of the settings interface is accessible in the admin panel only if the _API tokens > Read_ permission is granted. +::: + +API tokens allow users to authenticate REST and GraphQL API queries (see [Developer Documentation](/developer-docs/latest/setup-deployment-guides/configurations/optional/api-tokens.md)). Administrators can manage API tokens through the *Global settings > API Tokens* sub-section of the settings interface. ![API tokens](../assets/settings/settings_api-token.png) -The *API Tokens* settings sub-section displays a table listing all created API tokens. +The *API Tokens* settings sub-section displays a table listing all of the created API tokens. -For each API token, the table displays its name, description, type and date of creation. From the table, administrators can also: +The table displays each API token's name, description, date of creation, and date of last use. From the table, administrators can also: -- Click on the edit button to edit an API token's name, description or type -- Click on the delete button to delete an API token +- Click on the edit button to edit an API token's name, description, type, duration or [regenerate the token](#regenerating-an-api-token). +- Click on the delete button to delete an API token. ### Creating a new API token -All API tokens created by administrators of the Strapi application are permanent tokens that cannot be regenerated. - To create a new API token: -1. Click on the **Add new entry** button. +1. Click on the **Create new API Token** button. 2. In the API token edition interface, configure the new API token: -| Setting name | Instructions | -|--------------|-----------------------------------------------------------| -| Name | Write the name of the API token. | -| Description | (optional) Write a description for the API token. | -| Token type | Choose a token type: either *Read-only* or *Full access*. | + | Setting name | Instructions | + | -------------- | ------------------------------------------------------------------------ | + | Name | Write the name of the API token. | + | Description | (optional) Write a description for the API token. | + | Token duration | Choose a token duration: *7 days*, *30 days*, *90 days*, or *Unlimited*. | + | Token type | Choose a token type: *Read-only*, *Full access*, or *Custom*. | -3. Click on the **Save** button. The new API token will be displayed at the top of the interface, along with a copy button . +3. (optional) For the *Custom* token type, define specific permissions for your API endpoints by clicking on the content-type name and using checkboxes to enable or disable permissions. +4. Click on the **Save** button. The new API token will be displayed at the top of the interface, along with a copy button . + + ![Custom API Token](../assets/settings/settings_api-token-custom.png) ::: caution For security reasons, API tokens are only shown right after they have been created. When refreshing the page or navigating elsewhere in the admin panel, the newly created API token will be hidden and will not be displayed again. ::: + +### Regenerating an API token + +To regenerate an API token: + +1. Click on the API token's edit button. +2. Click on the **Regenerate** button. +3. Click on the **Regenerate** button to confirm in the dialog. +4. Copy the new API token displayed at the top of the interface. + +## Configuring other plugins + +Installed plugins can add their own settings sub-sections. These sections are found at the bottom of the list of sub-sections, below the settings for pre-installed Strapi plugins. Settings for 3rd party plugins are described in the plugin's documentation on the [Marketplace](https://market.strapi.io). diff --git a/docs/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md b/docs/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md index ff988f39cc..8c2290d133 100644 --- a/docs/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md +++ b/docs/user-docs/latest/users-roles-permissions/configuring-administrator-roles.md @@ -6,7 +6,7 @@ canonicalUrl: https://docs.strapi.io/user-docs/latest/users-roles-permissions/co # Configuring administrator roles -Administrators are the users of an admin panel of a Strapi application. Administrator accounts and roles are managed with the Role-Based Access Control (RBAC) feature. It is available in the *Administration panel* section of the ![Settings icon](../assets/icons/settings.svg) _Settings_ sub navigation. +Administrators are the users of an admin panel of a Strapi application. Administrator accounts and roles are managed with the Role-Based Access Control (RBAC) feature. It is available in the *Administration panel* section of the ![Settings icon](../assets/icons/settings.svg) *Settings* sub navigation. The *Administration panel* section is divided into 2 sub-sections: *Roles* and *Users* (see [Managing administrators](managing-administrators.md)). @@ -117,7 +117,7 @@ By default, plugins permissions can be configured for the Content-type Builder, | -------------------- | ----------- | | Content-Manager |
  • Single types
    • "Configure view" - allows to configure the edit view of a single type
  • Collection types
    • "Configure view" - allows to configure the edit view of a collection type
  • Components
    • "Configure Layout" - allows to configure the layout of a component
| | Content-Type-Builder |
  • General
    • "Read" - gives access to the Content-type Builder plugin in read-only mode
| -| Upload
*(Media Library)* |
  • General
    • "Access the Media Library" - gives access to the Media Library plugin
  • Assets
    • "Create (upload)" - allows to upload media files
    • "Update (crop, details, replace) + delete" - allows to edit uploaded media files
    • "Download" - allows to download uploaded media files
    • "Copy link" - allows to copy the link of an uploaded media file
| +| Upload
*(Media Library)* |
  • General
    • "Access the Media Library" - gives access to the Media Library plugin
  • Assets
    • "Create (upload)" - allows to upload media files
    • "Update (crop, details, replace) + delete" - allows to edit uploaded media files
    • "Download" - allows to download uploaded media files
    • "Copy link" - allows to copy the link of an uploaded media file
| | Users-Permissions |
  • Roles
    • "Create" - allows to create end-user roles
    • "Read" - allows to see created end-user roles
    • "Update" - allows to edit end-user roles
    • "Delete" - allows to delete end-user roles
  • Providers
    • "Read" - allows to see providers
    • "Edit" - allows to edit providers
  • Email Templates
    • "Read" - allows to access the email templates
    • "Edit" - allows to edit email templates
  • Advanced settings
    • "Read" - allows to access the advanced settings of the Users & Permissions plugin
    • "Edit" - allows to edit advanced settings
👉 Path reminder to the Users & Permissions plugin:
*General > Settings > Users & Permissions plugin* | ::: @@ -128,10 +128,11 @@ Settings permissions can be configured for all settings accessible from *General | Setting name | Permissions | | ----------------------- | ----------- | +| API Tokens |
  • General
    • "Create (generate)" - allows the creation of API tokens
    • "Read" - allows you to see created API tokens (disabling this permission will disable access to the *Global Settings - API Tokens* settings)
    • "Update" - allows editing of API tokens
    • "Delete (revoke)" - allows deletion of API tokens
    • "Regenerate" - allows regeneration of the API token
👉 Path reminder to API Tokens settings:
*General > Settings > Global Settings - API Tokens* | | Media Library |
  • General
    • "Access the Media Library settings page" - gives access to Media Library settings
👉 Path reminder to Media Library settings:
*General > Settings > Global Settings - Media Library* | | Internationalization |
  • Locales
    • "Create" - allows to create new locales
    • "Read" - allows to see available locales
    • "Update" - allows to edit available locales
    • "Delete" - allows to delete locales
👉 Path reminder to the Internationalization settings:
*General > Settings > Global Settings - Internationalization* | | Single sign on |
  • Options
    • "Read" - allows to access the SSO settings
    • "Update" - allows to edit the SSO settings
👉 Path reminder to the SSO settings:
*General > Settings > Global Settings - Single Sign-On* | -| Plugins and Marketplace |
  • Marketplace
    • "Access the Marketplace" - gives access to the Marketplace
  • Plugins
    • "Install (only for dev env)" - allows to install new plugins when in a development environment
    • "Uninstall (only for dev env)" - allows to uninstall plugins when in a development environment
| +| Plugins and Marketplace |
  • Marketplace
    • "Access the Marketplace" - gives access to the Marketplace
  • Plugins
    • "Install (only for dev env)" - allows to install new plugins when in a development environment
    • "Uninstall (only for dev env)" - allows to uninstall plugins when in a development environment
| | Webhooks |
  • General
    • "Create" - allows to create webhooks
    • "Read" - allows to see created webhooks
    • "Update" - allows to edit webhooks
    • "Delete" - allows to delete webhooks
👉 Path reminder to Webhook settings:
*General > Settings > Global Settings - Webhook* | | Users and Roles |
  • Users
    • "Create (invite)" - allows to create administrator accounts
    • "Read" - allows to see existing administrator accounts
    • "Update" - allows to edit administrator accounts
    • "Delete" - allows to delete administrator accounts
  • Roles
    • "Create" - allows to create administrator roles
    • "Read" - allows to see created administrator roles
    • "Update" - allows to edit administrator roles
    • "Delete" - allows to delete administrator roles
👉 Path reminder to the RBAC feature:
*General > Settings > Administration Panel* |