docs: insert code sponsor snippet and add rollbar logo as a sponsor

Author: marcosmoura

build/docs/webpack.js

@@ -1,6 +1,5 @@
 import webpack from 'webpack'
 import path from 'path'
-import fs from 'fs'
 import autoprefixer from 'autoprefixer'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
@@ -16,12 +15,6 @@ import { config, resolvePath, getRandomInt } from '../config'
 import banner from '../lib/banner'
 import { mapRoutes } from '../../docs/app/routes'
 
-function postProcessHtml (context) {
-  const adsHTML = fs.readFileSync(resolvePath('docs/ads.html'))
-
-  return context.html.replace('<!-- AD OUTLET -->', adsHTML.toString())
-}
-
 const cacheUpdateTime = process.env.CACHE_UPDATE_MINUTES || 10
 const cssLoader = ExtractTextPlugin.extract({
   use: 'css-loader',
@@ -200,8 +193,7 @@ const webpackConfig = {
       captureAfterElementExists: '.main-container',
       captureAfterTime: 7000,
       navigationLocked: true,
-      ignoreJSErrors: true,
-      postProcessHtml
+      ignoreJSErrors: true
     }),
     new OfflinePlugin({
       autoUpdate: +cacheUpdateTime * 60 * 1000

build/lib/webpack.js

@@ -287,6 +287,7 @@ export default entry => {
       analyzerPort: getRandomInt(8000, 8999)
     }))
   }
+
   if (entry.components) {
     webpackConfig.plugins.push(new CopyWebpackPlugin(getCopyPaths()))
   }

build/local/webpack.js

@@ -67,10 +67,9 @@ export default {
     ]
   },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('development')
-      }
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+      DEBUG: false
     }),
     new webpack.WatchIgnorePlugin([resolvePath('node_modules')]),
     new webpack.HotModuleReplacementPlugin(),

docs/ads.html

@@ -1,81 +1,55 @@
 <template>
-  <md-content id="ad-manager" md-theme="default"></md-content>
+  <md-content class="ad-manager" id="ad-manager" md-theme="default">
+    <div id="code-sponsor" class="code-sponsor">
+      <span class="code-sponsor-header">Vue Material is proudly sponsored by:</span>
+
+      <a :href="linkHref" class="code-sponsor-content" target="_blank" rel="noopener">
+        <strong class="code-sponsor-name">Rollbar</strong>
+        <span class="code-sponsor-description">Real-time error monitoring, alerting, and analytics for developers 🚀</span>
+      </a>
+
+      <img class="code-sponsor-pixel" :src="pixelHref" />
+    </div>
+  </md-content>
 </template>
 
 <script>
+  const isProd = process.env.NODE_ENV === 'production'
+  const token = 'bb9dade0-0207-4ab0-8c86-d00502d952f5'
+
   export default {
     name: 'AdManager',
-    data: () => ({
-      carbonEl: null
-    }),
-    render () {
-      return null
-    },
-    methods: {
-      saveAdsElements () {
-        this.carbonEl = document.getElementById('carbonads')
-
-        if (!this.carbonEl) {
-          this.$destroy()
+    computed: {
+      linkHref () {
+        if (isProd) {
+          return `https://cs.berry.sh/c/${token}`
         }
       },
-      appendCarbonAds () {
-        const interval = window.setInterval(() => {
-          const carbonAds = document.getElementById('carbonads')
-          const container = document.querySelector('.container')
-          const pageContainer = document.querySelector('.page-container')
-          const splashContainer = document.querySelector('.splash-container')
-          const adManager = this.$el
-
-          if (carbonAds && container) {
-            if (pageContainer) {
-              pageContainer.insertBefore(carbonAds, pageContainer.firstChild)
-            } else if (splashContainer && adManager) {
-              adManager.appendChild(carbonAds)
-            } else {
-              container.insertBefore(carbonAds, container.firstChild)
-            }
-
-            window.clearInterval(interval)
-          }
-        }, 50)
-      },
-      moveCarbonAdsToBody () {
-        if (this.carbonEl) {
-          document.body.appendChild(this.carbonEl)
+      pixelHref () {
+        if (isProd) {
+          return `https://cs.berry.sh/l/${token}/pixel.png`
         }
       }
-    },
-    mounted () {
-      this.saveAdsElements()
-      this.appendCarbonAds()
-    },
-    beforeDestroy () {
-      this.moveCarbonAdsToBody()
     }
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @import "~vue-material/theme/engine";
 
-  $ad-responsive-big: 1670px;
-  $ad-responsive-small: 600px;
+  $ad-responsive-big: 1690px;
+  $ad-responsive-small: 768px;
 
   @mixin ad-theme ($hue, $color) {
-    #carbonads {
+    .code-sponsor {
       background: md-get-palette-color(grey, $hue);
 
-      .carbon-poweredby {
+      .code-sponsor-header {
         color: rgba($color, .54);
-
-        &:hover {
-          color: rgba($color, .87);
-        }
       }
     }
 
-    .carbon-wrap a {
+    .code-sponsor-content {
       color: rgba($color, .7);
 
       &:hover {
@@ -84,29 +58,26 @@
     }
   }
 
-  .main-container {
-    @include ad-theme(200, #000);
-  }
+  .ad-manager {
+    width: calc(100% + 32px);
+    margin: 0 -16px -16px;
 
-  .splash-container {
-    @media (min-width: $ad-responsive-big) {
-      @include ad-theme(800, #fff);
+    @media (max-width: $ad-responsive-small) {
+      display: flex;
     }
   }
 
-  #carbonads {
-    max-width: 162px;
-    margin: 1em 0 24px 16px;
-    padding: 16px;
+  .code-sponsor {
+    max-width: 175px;
+    margin: 7px 16px 24px 16px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
     float: right;
     position: relative;
     z-index: 10;
-
-    .splash-container & {
-      @media (max-width: $ad-responsive-big) {
-        background: #fff;
-      }
-    }
+    font-size: 12px;
+    line-height: 1.5em;
 
     @media (min-width: $ad-responsive-big) {
       margin: 0;
@@ -117,86 +88,65 @@
 
     @media (max-width: $ad-responsive-small) {
       max-width: none;
-      min-height: 100px;
-      margin-left: 0;
-      padding: 0;
+      margin-bottom: 16px;
       float: none;
     }
 
     .splash-container & {
       @media (max-width: $ad-responsive-big) {
-        max-width: none;
+        max-width: 530px;
         min-height: 100px;
-        margin-left: 0;
-        padding: 0;
+        margin: 8px auto;
         float: none;
+        background: none !important;
       }
     }
+  }
 
-    .carbon-wrap {
-      display: flex;
-      flex-direction: column;
-      font-size: 12px;
-
-      @media (max-width: $ad-responsive-small) {
-        display: block;
-      }
-
-      .splash-container & {
-        @media (max-width: $ad-responsive-big) {
-          display: block;
-        }
-      }
-
-      .carbon-img {
-        @media (max-width: $ad-responsive-small) {
-          margin-right: 16px;
-          float: left;
-        }
-
-        .splash-container & {
-          @media (max-width: $ad-responsive-big) {
-            margin-right: 16px;
-            float: left;
-          }
-        }
-      }
-
-      .carbon-text {
-        line-height: 1.5em;
-
-        @media (max-width: $ad-responsive-big) {
-          padding-top: 1em;
-          padding-right: 16px;
-          display: block;
-        }
+  .code-sponsor-header {
+    font-size: 11px;
+    line-height: 1.3em;
+  }
 
-        @media (min-width: $ad-responsive-big) {
-          margin: 12px 0 8px;
-        }
-      }
+  .code-sponsor-content {
+    margin-top: 1em;
 
-      a {
-        &:hover {
-          text-decoration: none;
-        }
-      }
+    &:hover {
+      text-decoration: none;
     }
+  }
 
-    .carbon-poweredby {
-      font-size: 11px;
+  .code-sponsor-name,
+  .code-sponsor-description {
+    &:hover {
+      text-decoration: underline;
     }
   }
 
-  #ad-manager {
-    width: calc(100% + 32px);
-    margin: 0 -16px -16px;
+  .code-sponsor-name {
+    margin-bottom: .5em;
+    display: block;
+    font-weight: 600;
+  }
 
-    #carbonads {
-      @media (max-width: $ad-responsive-big) {
-        max-width: 530px;
-        margin: 24px auto;
-      }
+  .code-sponsor-pixel {
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+
+  .main-container {
+    @include ad-theme(200, #000);
+  }
+
+  .splash-container {
+    @media (min-width: $ad-responsive-big) {
+      @include ad-theme(800, #fff);
     }
   }
 </style>