Merge branch 'hotfix-ga-uid' into develop

README.md

@@ -1,11 +1,10 @@
 <p align="center">
   <a href="https://ghettovoice.github.io/vuelayers" target="_blank" title="VueLayers Homepage">
-    <img width="100" src="https://ghettovoice.github.io/vuelayers/static/img/logo.svg">
+    <img width="100" src="https://ghettovoice.github.io/vuelayers/static/img/logo.svg"><br />
+    <h1>VueLayers.js</h1>
   </a>
 </p>
 
-# VueLayers
-
 > [Vue 2.0](https://vuejs.org/) components to work with [OpenLayers](https://openlayers.org)
 
 [![Build Status](https://travis-ci.org/ghettovoice/vuelayers.svg?branch=master)](https://travis-ci.org/ghettovoice/vuelayers)

build/webpack.docs.dev.conf.js

@@ -6,6 +6,7 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const PreloadWebpackPlugin = require('preload-webpack-plugin')
 const baseWebpackConfig = require('./webpack.base.conf')
 const utils = require('./utils')
+const config = require('./config')
 
 const webpackConfig = merge(baseWebpackConfig, {
   // cheap-module-eval-source-map is faster for development
@@ -39,6 +40,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       template: 'docs/index.ejs',
       inject: true,
       serviceWorker: '',
+      gaUID: config.replaces.C_GOOGLE_UID,
     }),
     new FriendlyErrorsPlugin(),
     new PreloadWebpackPlugin({

build/webpack.docs.prod.conf.js

@@ -69,6 +69,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency',
       serviceWorker: `<script>${utils.getServiceWorkerSrc()}</script>`,
+      gaUID: config.replaces.C_GOOGLE_UID,
     }),
     // split vendor js into its own file
     new webpack.optimize.CommonsChunkPlugin({

docs/app.vue

@@ -29,7 +29,7 @@
                 router-link(:to="subitem.link", :title="subitem.title" exact-active-class="is-active") {{ subitem.title }}
 
       div.center.column.is-8-tablet.is-9-desktop.is-offset-4-tablet.is-offset-3-desktop
-        vld-navbar.is-hidden-tablet
+        vld-navbar.is-hidden-tablet(':menu-active.sync'="navbarMenuActive")
           vld-navbar-item.logo.has-text-left(slot="brand" link="/" title="C_PKG_FULLNAME.js Docs", :router="true")
             div
               img(src="./static/img/logo.svg" alt="C_PKG_FULLNAME Logo")
@@ -103,9 +103,21 @@
     },
   }
 
+  const watch = {
+    $route () {
+      this.navbarMenuActive = false
+    },
+  }
+
   export default {
     name: 'vld-app',
     computed,
+    watch,
+    data () {
+      return {
+        navbarMenuActive: false,
+      }
+    },
   }
 </script>
 
@@ -173,12 +185,16 @@
         z-index: 10
         box-shadow: 0 0 1em rgba(0, 0, 0, 0.4)
         .logo
-          font-size: 1.5em
+          font-size: 1.1em
           display: flex
           div
             &:first-child
-              max-width: 50px
+              max-width: 25px
               margin-right: .25em
             img
               vertical-align: text-bottom
+        +tablet()
+          font-size: 1.5em
+          div:first-child
+            max-width: 50px
 </style>

docs/components/navbar/navbar.vue

@@ -3,11 +3,11 @@
     div.navbar-brand
       slot(name="brand")
 
-      div.navbar-burger(ref="menuBtn", @click="onMenuClick")
+      div.navbar-burger(ref="menuBtn" '@click'="onNavBurgerClick" ':class'="{'is-active': isMenuActive}")
         span/
         span/
         span/
-    div.navbar-menu(ref="menu")
+    div.navbar-menu(ref="menu" ':class'="{'is-active': isMenuActive}")
       div.navbar-start
         slot(name="start")
       div.navbar-end
@@ -17,18 +17,33 @@
 <script>
   const props = {
     transparent: Boolean,
+    menuActive: Boolean,
   }
 
   const methods = {
-    onMenuClick () {
-      this.$refs.menuBtn.classList.toggle('is-active')
-      this.$refs.menu.classList.toggle('is-active')
+    onNavBurgerClick () {
+      this.isMenuActive = !this.isMenuActive
+      this.$emit('update:menuActive', this.isMenuActive)
+    },
+  }
+
+  const watch = {
+    menuActive (value) {
+      if (value !== this.isMenuActive) {
+        this.isMenuActive = value
+      }
     },
   }
 
   export default {
     name: 'vld-navbar',
     props,
     methods,
+    watch,
+    data () {
+      return {
+        isMenuActive: this.menuActive,
+      }
+    },
   }
 </script>

docs/index.ejs

@@ -19,7 +19,7 @@
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-    ga('create', 'C_GOOGLE_UID', 'auto');
+    ga('create', '<%= htmlWebpackPlugin.options.gaUID %>', 'auto');
     ga('send', 'pageview');
     /* eslint-enable */
   </script>

docs/pages/start.vue

@@ -51,7 +51,7 @@
         Each directory includes a set of index files: #[code lib/**/index.js], #[code lib/**/index.es.js],
         #[code lib/**/index.umd.js] and #[code lib/**/index.umd.min.js]. All stylesheets are compiled to files:
         #[code lib/style.css] and #[code lib/style.min.css].
-      table
+      table.is-hidden-touch
         tr
           th Module system
           th Environments
@@ -62,6 +62,12 @@
           td {{ row.env.join(', ') }}
           td(v-html="row.js.map(f => `<code>${f}</code>`).join('<br />')")
           td(v-html="row.css.map(f => `<code>${f}</code>`).join('<br />')")
+      ul.is-hidden-desktop
+        li(v-for="row in builds").
+           #[b Module system]: {{ row.sys }}#[br]
+           #[b Environments]: {{ row.env.join(', ') }}#[br]
+           #[b JS]: #[span(v-html="row.js.map(f => `<code>${f}</code>`).join(', ')")]#[br]
+           #[b CSS]: #[span(v-html="row.css.map(f => `<code>${f}</code>`).join(', ')")]#[br]
 
       h3 Usage
       h4 NPM / Webpack / Rollup

docs/router.js

@@ -1,3 +1,4 @@
+/* global ga */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
@@ -23,5 +24,14 @@ router.beforeEach((to, from, next) => {
 
   next()
 })
+router.afterEach((to, from) => {
+  if (window.ga != null) {
+    ga('set', {
+      page: to.path,
+      title: to.meta.title,
+    })
+    ga('send', 'pageview')
+  }
+})
 
 export default router