Add carbon ads in Layout

docs/.vuepress/components/demos/utils.js

@@ -67,6 +67,8 @@ var panelSidebar = {
   id: 'layers',
   // Make the panel resizable
   resizable: {
+    maxDim: 350,
+    minDim: 200,
     tc: 0, // Top handler
     cl: 1, // Left handler
     cr: 0, // Right handler

docs/.vuepress/theme/CarbonAds.vue

@@ -0,0 +1,59 @@
+<script>
+module.exports = {
+  render (h) {
+    return h('div', { class: 'carbon-ads' })
+  },
+  mounted () {
+    this.load()
+  },
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path &&
+        this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = '';
+        this.load();
+      }
+    }
+  },
+  methods: {
+    load () {
+      const s = document.createElement('script');
+      s.id = '_carbonads_js';
+      s.src = `//cdn.carbonads.com/carbon.js?serve=CKYI5KJU&placement=grapesjscom`;
+      this.$el.appendChild(s);
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import "~@default-theme/styles/config.styl"
+
+.carbon-ads
+  min-height 102px
+  padding 1.5rem 1.5rem 0
+  margin-bottom -0.5rem
+  font-size 0.75rem
+  a
+    color #444
+    font-weight normal
+    display inline
+  .carbon-img
+    float left
+    margin-right 1rem
+    border 1px solid $borderColor
+    img
+      display block
+  .carbon-poweredby
+    color #999
+    display block
+    margin-top 0.5em
+
+@media (max-width: $MQMobile)
+  .carbon-ads
+    .carbon-img img
+      width 100px
+      height 77px
+</style>

docs/.vuepress/theme/Layout.vue

@@ -0,0 +1,17 @@
+<template>
+  <Layout>
+    <CarbonAds slot="sidebar-top"/>
+  </Layout>
+</template>
+
+<script>
+var Layout = require('@default-theme/Layout.vue').default;
+var CarbonAds = require('./CarbonAds.vue').default;
+
+module.exports = {
+  components: {
+    Layout,
+    CarbonAds,
+  }
+}
+</script>

docs/getting-started.md

@@ -248,6 +248,8 @@ const editor = grapesjs.init({
       el: '.editor-sidebar',
       // Make the panel resizable
       resizable: {
+        maxDim: 350,
+        minDim: 200,
         tc: 0, // Top handler
         cl: 1, // Left handler
         cr: 0, // Right handler
@@ -265,7 +267,7 @@ const editor = grapesjs.init({
 </Demo>
 
 ## Style Manager
-An important step in any web project is the style definition and with the built-in style manager module you're able to do so freely and quickly.
+An important step in any web project is the style definition and with the built-in style manager module you're able to do it easily and quickly.
 The style manager is composed by style properties and grouped by sectors, so let's see how to define a basic set of them.
 
 -- show how to render SM and show style for width, height, padding, Typography, shadows

package.json

@@ -90,8 +90,8 @@
     }
   },
   "scripts": {
+    "docs": "vuepress dev docs",
     "docs:api": "node docs/api.js",
-    "docs:dev": "vuepress dev docs",
     "docs:build": "npm run docs:api && vuepress build docs",
     "lint": "eslint src",
     "check": "npm run lint && npm run test",