Add custom Markdown Containers for callouts

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 => `<div class="custom-block strapi"><p class="custom-block-title">🤓 ${info}</p>`,
+    after: '</div>'
+  }],
+  ['vuepress-plugin-container', {
+    type: 'tip',
+    before: info => `<div class="custom-block tip"><p class="custom-block-title">💡 ${info}</p>`,
+    after: '</div>'
+  }],
+  ['vuepress-plugin-container', {
+    type: 'note',
+    before: info => `<div class="custom-block note"><p class="custom-block-title">✏️ ${info}</p>`,
+    after: '</div>'
+  }],
+  ['vuepress-plugin-container', {
+    type: 'caution',
+    before: info => `<div class="custom-block caution"><p class="custom-block-title">✋ ${info}</p>`,
+    after: '</div>'
+  }],
+  ['vuepress-plugin-container', {
+    type: 'warning',
+    before: info => `<div class="custom-block warning"><p class="custom-block-title">⚠️  ${info}</p>`,
+    after: '</div>'
+  }],
+  ['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',

docs/.vuepress/styles/index.styl

@@ -2,4 +2,6 @@
   color: $accentColor !important
 
 .el-tabs__item:not(.is-disabled):hover
-  color: $accentColor !important
+  color: $accentColor !important
+
+@import "strapi-custom-blocks.styl"

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)

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
 ---
 
-<style lang="scss" scoped>
-  /*
-    We override the :::warning callout 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.warning {
-    border-left-width: .25rem;
-    background-color: #f8f8f8;
-    border-color: #bbbbba;
-    /* margin-top: 2em; */
-    /* margin-bottom: 2em; */
-
-    .custom-block-title, p, li {
-      color: rgb(44, 62, 80);
-    }
-    a {
-      color: #007eff;
-    }
-  }
-</style>
-
 # 🌍  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.
 :::
 

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.
 ---
 
-<style lang="scss" scoped>
-/*
-    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);
-  }
-</style>
-
 # 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)! <br> 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!
 :::
 

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);
-  }
-
 </style>
 
 <!-- We use the vuepress-plugin-tabs plugin but customize tabs. -->
@@ -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!
 :::