diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 4a58744d14..3a2b9d29e3 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -373,30 +373,69 @@ const checklinksIgnoredFiles = [ './developer-docs/latest/update-migration-guides/migration-guides/migration-guide-beta.20-to-3.0.0.md', // line 93 ]; +const plugins = [ + ['vuepress-plugin-element-tabs', {}], + ['@vuepress/google-analytics', { + ga: 'UA-54313258-1', + }], + ['check-md', { + ignore: checklinksIgnoredFiles, + }], + ['seo', { + siteTitle: (_, $site) => $site.title, + title: $page => $page.title, + }], + ['vuepress-plugin-code-copy', { + color: '#ffffff', + successText: 'Copied to clipboard!', + }], + ['@vuepress/back-to-top', {}], + ['vuepress-plugin-container', { + type: 'callout', + defaultTitle: '' + }], + ['vuepress-plugin-container', { + type: 'callout-alt', + defaultTitle: '' + }], + ['vuepress-plugin-container', { + type: 'strapi', + defaultTitle: '', + before: info => `

🤓 ${info}

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

💡 ${info}

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

✏️ ${info}

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

✋ ${info}

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

⚠️ ${info}

`, + after: '
' + }], + ['vuepress-plugin-container', { + type: 'prerequisites', + defaultTitle: 'PREREQUISITES' + }], +]; + module.exports = { title: '', port: 8080, description: 'The headless CMS developers love.', base: '/documentation/', - plugins: { - '@vuepress/medium-zoom': {}, - 'vuepress-plugin-element-tabs': {}, - '@vuepress/google-analytics': { - ga: 'UA-54313258-1', - }, - 'check-md': { - ignore: checklinksIgnoredFiles, - }, - seo: { - siteTitle: (_, $site) => $site.title, - title: $page => $page.title, - }, - 'vuepress-plugin-code-copy': { - color: '#ffffff', - successText: 'Copied to clipboard!', - }, - '@vuepress/back-to-top': {}, - }, + plugins: plugins, head: [ [ 'link', diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl index 6e34e9968d..10b26c1a7d 100644 --- a/docs/.vuepress/styles/index.styl +++ b/docs/.vuepress/styles/index.styl @@ -2,4 +2,6 @@ color: $accentColor !important .el-tabs__item:not(.is-disabled):hover - color: $accentColor !important \ No newline at end of file + color: $accentColor !important + +@import "strapi-custom-blocks.styl" diff --git a/docs/.vuepress/styles/strapi-custom-blocks.styl b/docs/.vuepress/styles/strapi-custom-blocks.styl new file mode 100644 index 0000000000..5045ededa0 --- /dev/null +++ b/docs/.vuepress/styles/strapi-custom-blocks.styl @@ -0,0 +1,61 @@ +.custom-block + .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 + +.custom-block.details + color rgb(44, 62, 80) diff --git a/docs/developer-docs/latest/development/plugins/i18n.md b/docs/developer-docs/latest/development/plugins/i18n.md index a7511b32ff..3957f47d66 100644 --- a/docs/developer-docs/latest/development/plugins/i18n.md +++ b/docs/developer-docs/latest/development/plugins/i18n.md @@ -3,30 +3,6 @@ title: Internationalization (i18n) - Strapi Developer Documentation description: Instructions on how to use Strapi Content API with the Internationalization (i18n) optional plugin --- - - # 🌍 Internationalization (i18n) The Internationalization (i18n) plugin allows Strapi users to create, manage and distribute localized content in different languages, called "locales". For more information about the concept of internationalization, please refer to the @@ -43,7 +19,7 @@ The i18n plugin does not automatically translate the users' content nor adapt th ## Installation -::: warning PREREQUISITES +::: prerequisites PREREQUISITES The Internationalization plugin is installed by default on all Strapi applications running on version 3.6.0 or higher. For lower versions, a migration is needed (see [Update Strapi version](/developer-docs/latest/update-migration-guides/update-version.md)), as well as a manual installation of the plugin. ::: diff --git a/docs/developer-docs/latest/getting-started/introduction.md b/docs/developer-docs/latest/getting-started/introduction.md index a0ca95c264..4aebe82bde 100644 --- a/docs/developer-docs/latest/getting-started/introduction.md +++ b/docs/developer-docs/latest/getting-started/introduction.md @@ -3,58 +3,11 @@ title: Strapi Developer Documentation description: This documentation contains all technical documentation related to the setup, deployment, update and customization of your Strapi application. --- - - # Welcome to the Strapi developer documentation! This documentation contains all technical documentation related to the setup, deployment, update and customization of your Strapi application. -::: danger 🤓 Can't wait to start using Strapi? +::: 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)! ::: @@ -79,7 +32,7 @@ Strapi is a community-oriented project with an emphasis on transparency. The Str 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)). -::: danger 🤓 Want to join the community? +::: strapi Want to join the community? You can join [GitHub](https://github.com/strapi/strapi) and the [forum](https://forum.strapi.io/) and share your ideas and opinions with other community members and members of the Strapi team. If you're looking for news and updates about Strapi, [Twitter](https://twitter.com/strapijs) and the [blog](https://strapi.io/blog) are pretty good places to start! ::: diff --git a/docs/developer-docs/latest/getting-started/quick-start.md b/docs/developer-docs/latest/getting-started/quick-start.md index 3ac6346ce6..e9ae85fe7a 100644 --- a/docs/developer-docs/latest/getting-started/quick-start.md +++ b/docs/developer-docs/latest/getting-started/quick-start.md @@ -34,51 +34,6 @@ next: ./troubleshooting padding-left: .3em; } - /* - We override the :::warning and :::danger callouts for specific uses here. - The CSS is scoped so this won't affect the rest of the docs. - - Eventually this will be turned into custom blocks or VuePress components, - once I understand better how markdown-it and markdown-it-custom-block work. - */ - .custom-block.congrats, - .custom-block.warning, - .custom-block.danger { - border-left-width: .25rem; - } - - .custom-block.warning { - background-color: #f8f8f8; - border-color: #bbbbba; - } - - .custom-block.warning, - .custom-block.danger { - margin-top: 2em; - margin-bottom: 2em; - - .custom-block-title, p, li { - color: rgb(44, 62, 80); - } - a { - color: #007eff; - } - } - - .custom-block.danger { - background-color: rgba(129,107,250, .05); - border-color: rgb(129,107,250); - - .custom-block-title { - color: rgb(129,107,250); - font-weight: bold; - } - } - - .custom-block.details { - color: rgb(44, 62, 80); - } - @@ -110,12 +65,6 @@ next: ./troubleshooting border: solid 1px #bbbbba !important; } - .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item.is-active { - /* border: none; */ - /* height: 62px; */ - /* border-bottom: solid 1px red !important; */ - } - .el-tabs--card > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item:first-child { border-radius: 8px 0 0 8px !important; border-right: none !important; @@ -136,10 +85,8 @@ next: ./troubleshooting Strapi offers a lot of flexibility. Whether you want to go fast and quickly see the final result, or would rather dive deeper into the product, we got you covered. -:::warning PREREQUISITES - +::: prerequisites Make sure [Node.js and npm are properly installed](/developer-docs/latest/setup-deployment-guides/installation/cli.md#preparing-the-installation) on your machine. It is also possible to use Yarn instead of npm (see [install the Yarn package](https://yarnpkg.com/en/)). - ::: 👇 Let's get started! Using the big buttons below, please choose between: @@ -188,7 +135,7 @@ Once the installation is complete, your browser automatically opens 2 tabs: By completing the form in the first tab, you create your own account. Once done, you become the first administator user of this Strapi application. Welcome aboard, commander! -:::warning CONGRATULATIONS! 🥳 +::: callout CONGRATULATIONS! 🥳 Your blog is ready! You can start playing with Strapi and discover the product by yourself using our [User Guide](/user-docs/latest/getting-started/introduction.md), or proceed to part B below. Writing a blog is not your cup of tea? You can leave this guide and play with other [Starters](https://strapi.io/starters) on your own. @@ -267,7 +214,7 @@ After a few moments, you should see your blog with its updated title running at ![GIF: Updated Gatsby blog front end](../assets/quick-start-guide/qsg-starters-part2-04-restart_servers.gif) -:::warning CONGRATULATIONS! 🥳 +::: callout CONGRATULATIONS! 🥳 Now you know how to use Strapi to create and update your blog. Keep on creating amazing content! ::: @@ -279,7 +226,7 @@ The beauty of using Strapi [starters](https://strapi.io/starters) is that the St 👉 Deploying the front end mostly depends on the technology it's based on. The easiest way to deploy your Gatsby blog front end is probably to [deploy on Gatsby Cloud](https://support.gatsbyjs.com/hc/en-us/articles/360052324714-Connecting-to-Strapi). -:::danger 🤓 To go further with starters +:::strapi To go further with starters * Read more about the [starters CLI](https://strapi.io/blog/announcing-the-strapi-starter-cli) on our blog. * Start another project! We have lots of other [Starters](https://strapi.io/starters) you can use to kickstart your blog, e-commerce, corporate website, or portfolio project. @@ -318,7 +265,7 @@ You now have access to the [admin panel](http://localhost:1337/admin): ![admin panel screenshot glimpse](../assets/quick-start-guide//qsg-handson-part1-01-admin_panel.png) -:::warning 🥳 CONGRATULATIONS! +::: callout 🥳 CONGRATULATIONS! You have just created a new Strapi project! You can start playing with Strapi and discover the product by yourself using our [User Guide](/user-docs/latest/getting-started/introduction.md), or proceed to part B below. ::: @@ -482,7 +429,7 @@ Try it now! The result should be similar to the example response below 👇. ::: -:::warning 🥳 CONGRATULATIONS! +::: callout 🥳 CONGRATULATIONS! Now your content is created, published, and you have permissions to request it through the API. Keep on creating amazing content! ::: diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations.md b/docs/developer-docs/latest/setup-deployment-guides/configurations.md index c4ba626e72..cbea294ff8 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations.md @@ -4,30 +4,6 @@ description: Learn how you can manage and customize the configuration of your St sidebarDepth: 3 --- - - # Configurations Your application configuration lives in the `config` folder. All the configuration files are loaded on startup and can be accessed through the configuration provider. @@ -1165,7 +1141,7 @@ The dotfiles are not exposed. It means that every file name that starts with `.` Single-Sign-On on Strapi allows you to configure additional sign-in and sign-up methods for your administration panel. -::: danger PREREQUISITES +::: prerequisites PREREQUISITES - A Strapi application running on version 3.5.0 or higher is required. - To configure SSO on your application, you will need an EE license with a Gold plan. - Make sure Strapi is part of the applications you can access with your provider. For example, with Microsoft (Azure) Active Directory, you must first ask someone with the right permissions to add Strapi to the list of allowed applications. Please refer to your provider(s) documentation to learn more about that. diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment.md b/docs/developer-docs/latest/setup-deployment-guides/deployment.md index 415418903d..a2988a0e81 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment.md @@ -3,29 +3,6 @@ title: Deployment - Strapi Developer Documentation description: Learn how to develop locally with Strapi and deploy Strapi with various hosting options. --- - # Deployment Strapi gives you many possible deployment options for your project or application. Strapi can be deployed on traditional hosting servers or services such as 21YunBox, Render, Heroku, AWS, Azure and others. The following documentation covers how to develop locally with Strapi and deploy Strapi with various hosting options. @@ -36,7 +13,7 @@ Deploying **databases** along with Strapi is covered in the [Databases Guide](/d ## General guidelines -::: danger PREREQUISITES +::: prerequisites PREREQUISITES To provide the best possible environment for Strapi there are a few requirements, these apply in both a development (local) as well as a staging and production workflow. - Node LTS (v12 or V14) **Note that odd-number releases of Node will never be supported (e.g. v13, v15).** diff --git a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/21yunbox.md b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/21yunbox.md index 990ce23d99..4b3bb19110 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/21yunbox.md +++ b/docs/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/21yunbox.md @@ -3,30 +3,6 @@ title: 21YunBox Deployment - Strapi Developer Documentation description: Learn in this guide how to update an existing Strapi project so it can be deployed on 21YunBox. --- - - # 21YunBox This guide explains how to update an existing Strapi project so it can be deployed on [21YunBox](https://www.21yunbox.com). @@ -39,7 +15,7 @@ With persistent disks and managed PostgreSQL databases, 21YunBox gives you multi For more information consult [21YunBox's Deploy Strapi guide](https://www.21yunbox.com/docs/#/deploy-strapi) ::: -:::danger PREREQUISITES +:::prerequisites PREREQUISITES This guide assumes you already have a Strapi project to deploy. If you need a project, use the [Quick Start](/developer-docs/latest/getting-started/quick-start.md) to get started or fork 21YunBox's Strapi Examples: - [Strapi with SQLite Starter](https://gitee.com/eryiyunbox-examples/hello-strapi-sqlite) diff --git a/docs/developer-docs/latest/setup-deployment-guides/installation/cli.md b/docs/developer-docs/latest/setup-deployment-guides/installation/cli.md index eaeec71283..8a10b7f848 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/installation/cli.md +++ b/docs/developer-docs/latest/setup-deployment-guides/installation/cli.md @@ -3,46 +3,6 @@ title: Installing from CLI - Strapi Developer Documentation description: Fast-track local install for getting Strapi running on your computer in less than a minute. --- - - # Installing from CLI Strapi CLI (Command Line Interface) installation scripts are the fastest way to get Strapi running locally. The following guide is the installation option most recommended by Strapi. @@ -70,7 +30,7 @@ Starting from the release of Strapi v4, MongoDB is not supported natively anymor ## Creating a Strapi project -::: danger 🤓 CLI installation options +::: strapi CLI installation options The following installation guide covers the most basic installation option using the CLI. There are however other options that can be used when creating a new Strapi project: - Using the `--quickstart` flag at the end of the command to directly create the project in quickstart mode. diff --git a/docs/developer-docs/latest/setup-deployment-guides/installation/digitalocean-one-click.md b/docs/developer-docs/latest/setup-deployment-guides/installation/digitalocean-one-click.md index 6873b6a0aa..879c456f38 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/installation/digitalocean-one-click.md +++ b/docs/developer-docs/latest/setup-deployment-guides/installation/digitalocean-one-click.md @@ -3,56 +3,13 @@ title: DigitalOcean One-click - Strapi Developer Documentation description: Quickly deploy a Strapi application on DigitalOcean by simply using their One-click button. --- - - # DigitalOcean One-click The following documentation will guide you through the one-click creation of a new Strapi project hosted on [DigitalOcean](https://www.digitalocean.com/). DigitalOcean is a cloud platform that helps to deploy and scale applications by offering an Infrastructure as a Service (IaaS) platform for developers. -:::warning PREREQUISITES +::: prerequisites PREREQUISITES A DigitalOcean account is necessary to follow this installation guide. Please visit the [DigitalOcean website](https://try.digitalocean.com/strapi/) to create an account if you don't already have one. ::: @@ -81,6 +38,6 @@ To visit your Strapi application: Visiting the Strapi application page for the first time will require to create the first administrator user. -::: danger 🤓 Customization options for the DigitalOcean droplet +::: strapi Customization options for the DigitalOcean droplet The DigitalOcean droplet includes everything you need to run Strapi. However, should you need to access and customize the droplet environment and change some of its settings, you may want to refer to [our dedicated documentation](/developer-docs/latest/setup-deployment-guides/installation/digitalocean-customization.md). You can also find the image generation [source code](https://github.com/strapi/one-click-deploy/tree/master/digital-ocean) on Strapi's GitHub. ::: diff --git a/docs/developer-docs/latest/setup-deployment-guides/installation/platformsh.md b/docs/developer-docs/latest/setup-deployment-guides/installation/platformsh.md index 8d5c8b889f..96c37969d7 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/installation/platformsh.md +++ b/docs/developer-docs/latest/setup-deployment-guides/installation/platformsh.md @@ -4,37 +4,13 @@ description: Quickly deploy a Strapi application using the official Platform.sh sidebarDepth: 1 --- - - # Platform.sh One-Click The following documentation will guide you through the one-click creation of a new Strapi project hosted on [Platform.sh](https://platform.sh/). Platform.sh is a Platform as a Service (PaaS) that allows the management of multiple websites and applications. In particular, it allows to quickly install and deploy a Strapi application. -::: warning PREREQUISITES +::: prerequisites PREREQUISITES A Platform.sh account is necessary to follow this installation guide. Please visit the [Platform.sh website](https://console.platform.sh/) to create an account if you don't already have one. ::: diff --git a/docs/developer-docs/latest/setup-deployment-guides/installation/render.md b/docs/developer-docs/latest/setup-deployment-guides/installation/render.md index cdfec06b60..a313159e96 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/installation/render.md +++ b/docs/developer-docs/latest/setup-deployment-guides/installation/render.md @@ -3,37 +3,13 @@ title: Render One-Click - Strapi Developer Documentation description: Quickly deploy a Strapi application on Render by simply using their One-click button. --- - - # Render One-Click The following documentation will guide you through the one-click creation of a new Strapi project hosted on [Render](https://render.com). Render is a cloud provider with persistent disks and managed PostgreSQL databases, that offers multiple different ways to store content. -::: warning PREREQUISITES +::: prerequisites PREREQUISITES A Render account is necessary to follow this installation guide. Please visit [the Render dashboard](https://dashboard.render.com) to create an account if you do not already have one. ::: diff --git a/docs/package.json b/docs/package.json index 338d0ad6e5..c3ce79bc87 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,7 +19,8 @@ }, "devDependencies": { "@vuepress/plugin-back-to-top": "^1.8.2", - "vuepress-plugin-check-md": "^0.0.2" + "vuepress-plugin-check-md": "^0.0.2", + "vuepress-plugin-container": "^2.1.5" }, "author": { "email": "hi@strapi.io", diff --git a/docs/yarn.lock b/docs/yarn.lock index 3fab5eab47..66d8cddb87 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -8165,7 +8165,7 @@ vuepress-plugin-code-copy@^1.0.6: resolved "https://registry.yarnpkg.com/vuepress-plugin-code-copy/-/vuepress-plugin-code-copy-1.0.6.tgz#6431dab764b48b5b203e4936d98b1943651ce4ad" integrity sha512-FiqwMtlb4rEsOI56O6sSkekcd3SlESxbkR2IaTIQxsMOMoalKfW5R9WlR1Pjm10v6jmU661Ex8MR11k9IzrNUg== -vuepress-plugin-container@^2.0.2: +vuepress-plugin-container@^2.0.2, vuepress-plugin-container@^2.1.5: version "2.1.5" resolved "https://registry.yarnpkg.com/vuepress-plugin-container/-/vuepress-plugin-container-2.1.5.tgz#37fff05662fedbd63ffd3a5463b2592c7a7f3133" integrity sha512-TQrDX/v+WHOihj3jpilVnjXu9RcTm6m8tzljNJwYhxnJUW0WWQ0hFLcDTqTBwgKIFdEiSxVOmYE+bJX/sq46MA==