Strapi Documentation Release v4.0.0

CONTRIBUTING.md

@@ -42,8 +42,6 @@ The core team will review your pull request and will either merge it, request ch
 
 ### Contribution Workflow
 
-<!-- TODO add contrib-docs and link here -->
-
 #### Setting up
 
 1. Fork the `documentation` repository.
@@ -87,7 +85,7 @@ The core team will review your pull request and will either merge it, request ch
     ```
 
 #### Writing
-We can't provide you specific procedures with step-by-step instructions to write technical documentation. But if you have any question or need help, do feel free to reach us through [our forum](https://forum.strapi.io/).
+We can't provide you specific procedures with step-by-step instructions to write technical documentation. But our ["12 Rules of Technical Writing"](https://handbook.strapi.io/user-success-manual/12-rules-of-technical-writing) and [style guide](https://handbook.strapi.io/user-success-manual/strapi-documentation-style-guide) should help you get started. If you have any question or need help, do feel free to reach us through [our forum](https://forum.strapi.io/).
 
 #### Sharing & reviewing
 

README.md

@@ -17,14 +17,14 @@ Strapi is a free and open-source headless CMS delivering your content anywhere y
 
 - **Keep control over your data**. With Strapi, you know where your data is stored, and you keep full control at all times.
 - **Self-hosted**. You can host and scale Strapi projects the way you want. You can choose any hosting platform you want: AWS, Netlify, Heroku, a VPS, or a dedicated server. You can scale as you grow, 100% independent.
-- **Database agnostic**. You can choose the database you prefer. Strapi works with SQL & NoSQL databases: MongoDB, PostgreSQL, MySQL, MariaDB, and SQLite.
+- **Database agnostic**. You can choose the database you prefer. Strapi works with SQL databases: PostgreSQL, MySQL, MariaDB, and SQLite.
 - **Customizable**. You can quickly build your logic by fully customizing APIs, routes, or plugins to fit your needs perfectly.
 
 ## Documentation Contribution Requirements
 
 The following are required if you are submitting pull requests to the documentation. For more information on how to contribute please see our [contribution guide](./CONTRIBUTING.md)
 
-- NodeJS >= 10.16 <=12
+- NodeJS >=12.x <=14.x
 - NPM >= 6.x
 - Yarn >= 1.22.x
 

docs/.vuepress/styles/index.styl

@@ -2,4 +2,9 @@
   color: $accentColor !important
 
 .el-tabs__item:not(.is-disabled):hover
-  color: $accentColor !important
+  color: $accentColor !important
+
+.sidebar-heading:not(.clickable)
+  opacity: 1 !important
+
+@import "strapi-custom-blocks.styl"

docs/.vuepress/styles/strapi-custom-blocks.styl

@@ -0,0 +1,197 @@
+.el-tabs__active-bar
+  background-color: #007eff !important
+
+.custom-block
+  /**
+   * CALLOUTS
+   */
+  .custom-block-title
+    font-weight 600
+    margin-bottom -0.4rem
+  &.callout
+  &.callout-alt
+  &.strapi
+  &.prerequisites
+  &.note
+  &.tip
+  &.warning
+  &.danger
+  &.caution
+    padding .1rem 1.5rem
+    margin-top 2rem
+    margin-bottom 2rem
+    border-left-width: .25rem
+    border-left-style solid
+  &.strapi
+    background-color rgba(129,107,250, .05)
+    border-color rgb(129,107,250)
+    .custom-block-title
+      color #816bfa
+      font-weight 700
+    p, li
+      color #2c3e50
+      a
+        color #007eff
+  &.callout
+  &.callout-alt
+  &.prerequisites
+    background-color #f8f8f8
+    border-color #bbbbba
+  &.callout-alt
+    border-radius: 10px
+    background-color: #eff5f7
+    border: none
+  &.note
+    background-color #f4fcff
+    border-color #0193C2
+  &.caution
+    border-color #E7C000
+    background-color rgba(255,229,100,.3)
+    color #6b5900
+    .custom-block-title
+      color #B29400
+    a
+      color #2c3e50
+  &.warning
+    border-color #cc0000
+    background-color rgb(255, 230, 230)
+    color #4d0000
+    .custom-block-title
+      color #900
+    a
+      color #2c3e50
+  &.tip
+    background-color #EFFDF6
+  /**
+   * API CALLS
+  */
+  &.api-call
+    padding: 0
+    border-radius: 12px
+    // margin: 2rem 0 2rem
+    @media (min-width: 1536px)
+      display: flex
+      margin: 0 -12rem 2rem 0
+      align-items: stretch
+  &.request
+    background-color: #666687
+    padding: 0 1rem 1rem
+    border-radius: 12px
+    font-size: 100%
+    color:#F6F6F9
+    .custom-block-title
+      margin-left: -1rem
+      margin-right: -1rem
+      margin-top: 0
+      border-radius: 12px 12px 0 0
+      padding: .5rem 1rem
+      font-weight: 700
+      background-color: #32324D
+      color: #F6F6F9
+      font-size: 90%;
+    .custom-block-title+p
+      padding-top: 1rem
+    p, ul, ol
+      color: #2c3e50
+      color: rgba(241,251,255,.8)
+    p
+      padding-left: 1rem
+    ul, ol
+      padding-left: 3rem
+    [class^="language-"]
+      background-color: transparent
+      font-size: 110%
+      &::before
+        color: #EAEAEF
+    pre
+      padding: 1rem 0 0 1rem
+    code
+      color: #F6F6F9
+      background-color: #212134
+      .token
+        color: #F6F6F9 // catch-all for undefined colors
+        &.punctuation
+          color: #d3d3d3
+        &.operator
+        &.property
+          color: #F6F6F9
+        &.string
+        &.attr-name
+        &.function
+          color: #B6FFB5
+        &.number
+        &.keyword
+          color: #FDED9B
+        &.comment
+          color: #d9d9d9
+  &.response
+    background-color: #DCDCE4
+    margin-top: 2rem
+    padding: 0 1rem 1rem
+    border-radius: 12px
+    font-size: 100%
+    color: #666687
+    .extra-class::before
+      color: #666687
+    .custom-block-title
+      background-color: #C0C0CF
+      color: #32324D
+      border-radius: 12px 12px 0 0
+      margin-left: -1rem
+      margin-right: -1rem
+      padding: .5rem 1rem
+      margin-top: 0
+      font-weight: 700
+      font-size: 90%;
+      margin-bottom: .5rem
+    [class^="language-"]
+      background-color: transparent
+      font-size: 110%
+      &::before
+        color: #666687
+    pre
+      padding: 1rem 0 0 1rem
+    code
+      color: #666687 !important
+      .token
+        color: #666687 // catch-all for undefined colors
+        &.punctuation
+        &.operator
+        &.property
+          color: #666687
+        &.string
+          color: #2B7732
+        &.number
+          color: #B7322A
+        &.comment
+          color: #8585b2
+  &.request
+  &.response
+    margin-top: 2rem
+    .extra-class
+      font-size: 90%
+      border-radius: 6px 0 6px 0
+      pre
+        // white-space: pre-wrap
+        word-break: break-word
+        margin-bottom: 0
+
+  &.api-call
+    > .request
+    > .response
+      @media (min-width: 1536px)
+          flex: 0 0 42%
+          max-width: 42%
+    > .request
+      @media (min-width: 1536px)
+        border-radius: 12px 0 0 12px
+        .custom-block-title
+          border-radius: 12px 0 0 0
+    .response
+      @media (min-width: 1536px)
+        border-radius: 0 12px 12px 0
+        .custom-block-title
+          border-radius: 0 12px 0 0
+
+.custom-block.details
+  color rgb(44, 62, 80)

docs/.vuepress/theme/global-components/BronzeBadge.vue

@@ -9,7 +9,7 @@ export default {
     text: {
       type: String,
       default: 'Bronze',
-      required: true
+      // required: true // to suppress Vue warnings
     },
     withLinkIcon: {
       type: Boolean,

docs/.vuepress/theme/global-components/CustomBadge.vue

@@ -12,7 +12,7 @@ export default {
     text: {
       type: String,
       default: 'Badge',
-      required: true
+      // required: true // to suppress Vue warnings
     },
     withLinkIcon: {
       type: Boolean,

docs/.vuepress/theme/global-components/DatabasesLinks.vue

@@ -12,19 +12,6 @@
         </template>
       </InstallLink>
     </div>
-
-    <!-- MongoDB -->
-    <div>
-      <InstallLink link="/developer-docs/latest/setup-deployment-guides/configurations/databases/mongodb.html">
-        <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><linearGradient id="0" x1="24.2" y1="47.593" x2="25.627" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#74cb32"/><stop offset="1" stop-color="#abeb6b"/></linearGradient></defs><circle r="24" cy="24" cx="24" fill="url(#0)"/><g transform="matrix(.05078 0 0 .05078 10 10)" fill="#283d16"><path d="m413.69 0c0 0-45.37 44.01-94.43 61.759-363.33 131.42-210.1 387.52-205.1 388.36 0 0 20.374-35.48 47.896-55.717 174.64-128.39 210.14-276.17 210.14-276.17 0 0-39.19 177.83-194.56 288.48-34.32 24.426-57.55 84.57-67.39 144.68 0 0 24.325-9.828 34.785-12.49 4.079-26.618 12.607-52.11 27.03-74.875 217.15 25.854 288.27-149.12 297.56-210.14 21.929-144.1-55.928-253.89-55.928-253.89"/></g></svg>
-        </template>
-        <template #title>MongoDB</template>
-        <template #description>
-          Installation guide for MongoDB database
-        </template>
-      </InstallLink>
-    </div>
   </div>
 </template>
 
@@ -36,4 +23,4 @@ import InstallLink from "./InstallLink.vue"
 			InstallLink
 		}
 	}
-</script>
+</script>

docs/.vuepress/theme/global-components/GoldBadge.vue

@@ -9,7 +9,7 @@ export default {
     text: {
       type: String,
       default: 'Gold',
-      required: true
+      // required: true // to suppress Vue warnings
     },
     withLinkIcon: {
       type: Boolean,

docs/.vuepress/theme/global-components/PluginsLinks.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- API Documentation -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/documentation.html">
+      <InstallLink link="/developer-docs/latest/plugins/documentation.html">
         <template #icon>
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="24">
             <text
@@ -25,7 +25,7 @@
 
     <!-- Email -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/email.html">
+      <InstallLink link="/developer-docs/latest/plugins/email.html">
         <template #icon>
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="24">
             <text
@@ -48,7 +48,7 @@
 
     <!-- GraphQL -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/graphql.html">
+      <InstallLink link="/developer-docs/latest/plugins/graphql.html">
         <template #icon>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -185,7 +185,7 @@
 
     <!-- i18n -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/i18n.html">
+      <InstallLink link="/developer-docs/latest/plugins/i18n.html">
         <template #icon>
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="32">
             <g fill="none" fill-rule="evenodd">
@@ -208,7 +208,7 @@
 
     <!-- Upload -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/upload.html">
+      <InstallLink link="/developer-docs/latest/plugins/upload.html">
         <template #icon>
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="22">
             <g fill="none" fill-rule="evenodd">
@@ -241,7 +241,7 @@
 
     <!-- Users & Permissions -->
     <div>
-      <InstallLink link="/developer-docs/latest/development/plugins/users-permissions.html">
+      <InstallLink link="/developer-docs/latest/plugins/users-permissions.html">
         <template #icon>
           <svg xmlns="http://www.w3.org/2000/svg" width="30" height="24">
             <text

docs/.vuepress/theme/global-components/SilverBadge.vue

@@ -9,7 +9,7 @@ export default {
     text: {
       type: String,
       default: 'Silver',
-      required: true
+      // required: true // to suppress Vue warnings
     },
     withLinkIcon: {
       type: Boolean,

docs/README.md

@@ -1,5 +1,5 @@
 ---
 meta:
   - http-equiv: refresh
-    content: 0;url=/documentation/developer-docs/latest/getting-started/introduction.html
+    content: 0;url=/developer-docs/latest/getting-started/introduction.html
 ---