Add custom Markdown container for API calls

docs/.vuepress/config.js

@@ -373,30 +373,43 @@ 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: 'api-call',
+    defaultTitle: ''
+  }],
+  ['vuepress-plugin-container', {
+    type: 'request',
+    defaultTitle: 'Request'
+  }],
+  ['vuepress-plugin-container', {
+    type: 'response',
+    defaultTitle: 'Response'
+  }]
+];
+
 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,183 @@
+.custom-block
+  .custom-block-title
+    font-weight 600
+    margin-bottom -0.4rem
+  /*
+   * CALLOUTS
+   */
+  &.callout
+  &.callout-alt
+  &.strapi
+  &.prerequisites
+    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
+  /*
+   * API CALLS
+  */
+  &.api-call
+    padding: 0
+    border-radius: 12px
+    margin: 2rem 0 2rem
+    @media (min-width: 1536px)
+      display: flex
+      margin: 3rem -12rem 2rem 0
+      align-items: stretch
+  .request
+    background-color: rgba(62,67,88,.7)
+    padding: 0 1rem 1rem
+    border-radius: 12px
+    font-size: 90%
+    color: rgba(241,251,255,.8)
+    @media (min-width: 1536px)
+      flex: 0 0 48%
+      border-radius: 12px 0 0 12px
+    .custom-block-title
+      text-transform: uppercase
+      margin-left: -1rem
+      margin-right: -1rem
+      margin-top: 0
+      border-radius: 12px 12px 0 0
+      padding: .5rem 1rem
+      font-weight: 400
+      background-color: #373D4F
+      background-color: rgba(55,61,79,1)
+      color: #cacaca;
+      font-size: 90%;
+      @media (min-width: 1536px)
+        border-radius: 12px 0 0 0
+    .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%
+    pre
+      padding: 1rem 0 0 1rem
+    code
+      color: rgb(241,251,255)
+      background-color: rgba(90,90,90,.5)
+      .token
+        color: rgb(241,251,255)
+        &.punctuation
+        &.operator
+          color: rgba(241,251,255,.6)
+        &.property
+          color: rgb(241,251,255)
+        &.string
+          color: rgba(133, 217, 150, 1)
+        &.number
+          // color: rgb(245,106,11)
+          color: rgb(244,244,0)
+          // color: rgb(164, 205, 254)
+  .response
+    background-color: rgba(220,226,234,.4)
+    margin-top: 2rem
+    padding: 0 1rem 1rem
+    border-radius: 12px
+    font-size: 90%
+    @media (min-width: 1536px)
+      flex: 0 0 45%
+      margin-top: 0
+      border-radius: 0 12px 12px 0
+    .extra-class::before
+      color: rgba(42,64,80,.4)
+    .custom-block-title
+      background-color: rgba(220,226,234,1)
+      border-radius: 12px 12px 0 0
+      margin-left: -1rem
+      margin-right: -1rem
+      text-transform: uppercase
+      padding: .5rem 1rem
+      margin-top: 0
+      font-weight: 400
+      font-size: 90%;
+      margin-bottom: .5rem
+      @media (min-width: 1536px)
+        border-radius: 0 12px 0 0
+    [class^="language-"]
+      background-color: transparent
+      font-size: 110%
+    pre
+      padding: 1rem 0 0 1rem
+    code
+      .token
+        color: rgb(241,251,255)
+        &.punctuation
+        &.operator
+          color: rgba(42,64,80,.4)
+        &.property
+          color: rgba(42,64,80,.8)
+        &.string
+          color: rgba(27,137,70,1)
+        &.number
+          color: rgb(245,106,11)
+  .request
+  .response
+    .extra-class
+      font-size: 90%
+      border-radius: 6px 0 6px 0
+      pre
+        white-space: pre-wrap
+        word-break: break-word
+        margin-bottom: 0
+.custom-block.details
+  color rgb(44, 62, 80)
+
+
+/**
+ * Uncomment this alternate style below
+   to highlight non-code text that would be
+   inside a request container
+  */
+// .custom-block
+//   .request
+//     [class^="language-"]
+//       &+p
+//       &~ol
+//       &~ul
+//         background-color: #eeeeee
+//         margin-left: -1rem
+//         margin-right: -1rem
+//         padding: 1rem 2rem
+//         color: #2c3e50
+//         code
+//           color: #2c3e50
+//       &~ol
+//       &~ul
+//         padding: 1rem 4rem
+//       &+p+ol
+//       &+p+ul
+//         margin-top: -1rem
+//       &~ol:last-of-type
+//       &~ul:last-of-type
+//       &~p:last-of-type
+//         margin-bottom: -1.5rem
+//         border-radius: 0 0 12px 12px