chore: cleanup carbon

Author: rigor789

layouts/docs.ejs

@@ -24,13 +24,10 @@
     </a>
     <% } %>
 
-    <div class="md:bg-docs-gradient min-h-screen">
+    <div id="docs-app" class="md:bg-docs-gradient min-h-screen">
         <div class="container mx-auto flex">
-           
             <div class="hidden md:w-1/4 md:block border-r-4 min-h-full">
-                <div class="carbon">
-                    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESD42JM&placement=nativescript-vueorg" id="_carbonads_js"></script>
-                </div>
+                <carbon-component v-if="!isMobile"></carbon-component>
                 <div class="pl-4 md:pl-0 py-4 md:py-8">
                     <ul id="docs-toc" class="list-reset">
                         <%- include('_partials/categories', { entry: { children: meta.docs_categories } }) %>
@@ -87,6 +84,8 @@
                     </div>
                     <% } %>
 
+                    <carbon-component v-if="isMobile"></carbon-component>
+
                     <div class="markdown-body">
                         <%- current.contents %>
                     </div>

src/main.js

@@ -1,20 +1,35 @@
 document.addEventListener('DOMContentLoaded', () => {
+  const store = new Vue({
+    data: {
+      isMobile: false
+    },
+    methods: {
+      _resizeListener() {
+        this.isMobile = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) <= 768
+      }
+    },
+  })
+
+  // attach resize listener
+  window.addEventListener('resize', store._resizeListener);
+  store._resizeListener();
+
   new Vue({
     el: '#app',
+    name: 'NavApp',
 
     data: {
       modalVisible: false,
       modalLoaded: false,
-      isMobile: false,
       navOpen: false,
     },
-    created() {
-      this._resizeListener = () => {
-        this.isMobile = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) <= 768
-      };
-      window.addEventListener('resize', this._resizeListener);
-      this._resizeListener();
+
+    computed: {
+      isMobile() {
+        return store.isMobile
+      }
     },
+
     mounted() {
       const lang = document.documentElement.lang || 'en'
       const [version] = window.location.hostname.match(/v\d-\d-\d/) || ['master']
@@ -27,10 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
         debug: false
       })
     },
-    destroyed() {
-      window.removeEventListener('resize', this._resizeListener)
-    },
-    methods: {},
+
     directives: {
       nav(el) {
         el.addEventListener('change', (e) => {
@@ -39,4 +51,31 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
   });
+
+  const carbonComponent = {
+    render: h => h('div', { class: 'carbon' }),
+
+    mounted() {
+      const script = document.createElement('script')
+      script.id = '_carbonads_js'
+      script.src = '//cdn.carbonads.com/carbon.js?serve=CESD42JM&placement=nativescript-vueorg'
+
+      this.$el.appendChild(script)
+    }
+  }
+
+  new Vue({
+    el: '#docs-app',
+    name: 'DocsApp',
+
+    computed: {
+      isMobile() {
+        return store.isMobile
+      }
+    },
+
+    components: {
+      carbonComponent
+    }
+  })
 });

src/styles.css

@@ -44,9 +44,7 @@
 }
 
 .carbon {
-    margin-bottom: -32px;
-    padding-top: 32px;
-    padding-right: 4px;
+    padding-top: 16px;
 }
 
 #carbonads {
@@ -67,7 +65,7 @@
 }
 #carbonads .carbon-wrap {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 }
 
 #carbonads .carbon-img {
@@ -101,6 +99,22 @@
     right: 0;
 }
 
+@screen md {
+    .carbon {
+        margin-bottom: -32px;
+        padding-top: 32px;
+        padding-right: 4px;
+    }
+
+    #carbonads .carbon-wrap {
+        flex-direction: column;
+    }
+
+    #carbonads .carbon-text {
+        padding: 10px;
+    }
+}
+
 @screen xl {
     #carbonads .carbon-wrap {
         flex-direction: row;

static/main.js

@@ -3,24 +3,37 @@
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 document.addEventListener('DOMContentLoaded', function () {
+  var store = new Vue({
+    data: {
+      isMobile: false
+    },
+    methods: {
+      _resizeListener: function _resizeListener() {
+        this.isMobile = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) <= 768;
+      }
+    }
+  });
+
+  // attach resize listener
+  window.addEventListener('resize', store._resizeListener);
+  store._resizeListener();
+
   new Vue({
     el: '#app',
+    name: 'NavApp',
 
     data: {
       modalVisible: false,
       modalLoaded: false,
-      isMobile: false,
       navOpen: false
     },
-    created: function created() {
-      var _this = this;
-
-      this._resizeListener = function () {
-        _this.isMobile = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) <= 768;
-      };
-      window.addEventListener('resize', this._resizeListener);
-      this._resizeListener();
+
+    computed: {
+      isMobile: function isMobile() {
+        return store.isMobile;
+      }
     },
+
     mounted: function mounted() {
       var lang = document.documentElement.lang || 'en';
 
@@ -36,11 +49,8 @@ document.addEventListener('DOMContentLoaded', function () {
         debug: false
       });
     },
-    destroyed: function destroyed() {
-      window.removeEventListener('resize', this._resizeListener);
-    },
 
-    methods: {},
+
     directives: {
       nav: function nav(el) {
         el.addEventListener('change', function (e) {
@@ -49,4 +59,33 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     }
   });
+
+  var carbonComponent = {
+    render: function render(h) {
+      return h('div', { class: 'carbon' });
+    },
+
+    mounted: function mounted() {
+      var script = document.createElement('script');
+      script.id = '_carbonads_js';
+      script.src = '//cdn.carbonads.com/carbon.js?serve=CESD42JM&placement=nativescript-vueorg';
+
+      this.$el.appendChild(script);
+    }
+  };
+
+  new Vue({
+    el: '#docs-app',
+    name: 'DocsApp',
+
+    computed: {
+      isMobile: function isMobile() {
+        return store.isMobile;
+      }
+    },
+
+    components: {
+      carbonComponent: carbonComponent
+    }
+  });
 });

static/styles.css

@@ -3329,9 +3329,7 @@ button,
 }
 
 .carbon {
-  margin-bottom: -32px;
-  padding-top: 32px;
-  padding-right: 4px;
+  padding-top: 16px;
 }
 
 #carbonads {
@@ -3356,7 +3354,7 @@ button,
 
 #carbonads .carbon-wrap {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
 
 #carbonads .carbon-img {
@@ -3393,6 +3391,22 @@ button,
   right: 0;
 }
 
+@media (min-width: 768px) {
+  .carbon {
+    margin-bottom: -32px;
+    padding-top: 32px;
+    padding-right: 4px;
+  }
+
+  #carbonads .carbon-wrap {
+    flex-direction: column;
+  }
+
+  #carbonads .carbon-text {
+    padding: 10px;
+  }
+}
+
 @media (min-width: 1200px) {
   #carbonads .carbon-wrap {
     flex-direction: row;