Vuepress 1.0 (#843)

* bump vuepress

* extend default-theme, implement codefund

docs/.vuepress/config.js

@@ -2,7 +2,7 @@ const isDeployPreview = process.env.hasOwnProperty('DEPLOY_PREVIEW');
 
 const meta = {
   title: 'Vue Select | VueJS Select2/Chosen Component',
-  description: 'Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.',
+  description: 'Everything you wish the HTML &#x3C;select&#x3E; element could do, wrapped up into a lightweight, extensible Vue component.',
   url: 'http://sagalbot.github.io/vue-select/',
   icon: '/vue-logo.png',
 };
@@ -22,14 +22,35 @@ let head = [
       rel: 'stylesheet',
       type: 'text/css',
     }],
-  ['link', { rel: 'icon', href: `/vue-logo.png` }],
-  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
-  ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
-  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
-  ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
-  ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
-  ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
-  ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
+  ['link', {rel: 'icon', href: `/vue-logo.png`}],
+  ['meta', {name: 'theme-color', content: '#3eaf7c'}],
+  ['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
+  ['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
+  [
+    'link',
+    {rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png`}],
+  [
+    'link',
+    {rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c'}],
+  [
+    'meta',
+    {
+      name: 'msapplication-TileImage',
+      content: '/icons/msapplication-icon-144x144.png',
+    }],
+  ['meta', {name: 'msapplication-TileColor', content: '#000000'}],
+  ['meta', {name: 'title', content: meta.title}],
+  ['meta', {name: 'description', content: meta.description}],
+  ['link', {rel: 'icon', href: meta.icon, type: 'image/png'}],
+  ['meta', {property: 'og:image', content: meta.icon}],
+  ['meta', {property: 'twitter:image', content: meta.icon}],
+  ['meta', {name: 'description', content: meta.description}],
+  ['meta', {property: 'og:description', content: ''}],
+  ['meta', {property: 'twitter:description', content: meta.description}],
+  ['meta', {property: 'twitter:title', content: meta.title}],
+  ['meta', {property: 'og:title', content: meta.title}],
+  ['meta', {property: 'og:site_name', content: meta.title}],
+  ['meta', {property: 'og:url', content: meta.url}],
 ];
 
 if (isDeployPreview) {
@@ -37,29 +58,24 @@ if (isDeployPreview) {
     ['meta', {name: 'robots', content: 'noindex'}],
     ['meta', {name: 'googlebot', content: 'noindex'}],
   );
-} else {
-  head.push(
-    ['meta', {name: 'title', content: meta.title}],
-    ['meta', {name: 'description', content: meta.description}],
-    ['link', {rel: 'icon', href: meta.icon, type: 'image/png'}],
-    ['meta', {property: 'og:image', content: meta.icon}],
-    ['meta', {property: 'twitter:image', content: meta.icon}],
-    ['meta', {name: 'description', content: meta.description}],
-    ['meta', {property: 'og:description', content: ''}],
-    ['meta', {property: 'twitter:description', content: meta.description}],
-    ['meta', {property: 'twitter:title', content: meta.title}],
-    ['meta', {property: 'og:title', content: meta.title}],
-    ['meta', {property: 'og:site_name', content: meta.title}],
-    ['meta', {property: 'og:url', content: meta.url}],
-  );
 }
 
 module.exports = {
   title: 'Vue Select',
   description: meta.description,
   head,
-  serviceWorker: !isDeployPreview,
-  ga: isDeployPreview ? '' : 'UA-12818324-8',
+  plugins: {
+    '@vuepress/google-analytics': {
+      ga: isDeployPreview ? '' : 'UA-12818324-8',
+    },
+    '@vuepress/pwa': {
+      serviceWorker: true,
+      updatePopup: {
+        message: 'New content is available.',
+        buttonText: 'Refresh',
+      },
+    },
+  },
   themeConfig: {
     repo: 'sagalbot/vue-select',
     editLinks: true,

docs/.vuepress/theme/components/CodeFund.vue

@@ -0,0 +1,43 @@
+<script>
+export default {
+  render (h) {
+    return h('div', {attrs: {id: 'codefund'}});
+  },
+  mounted () {
+    this.load();
+  },
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path
+        // Only reload if the ad has been loaded
+        // otherwise it's possible that the script is appended but
+        // the ads are not loaded yet. This would result in duplicated ads.
+        && this.$el.querySelector('#cf')
+      ) {
+        this.$el.innerHTML = '';
+        this.load();
+      }
+    },
+  },
+  methods: {
+    load () {
+
+      // const template = 'default';
+      // const template = 'vertical';
+      // const template = 'float-with-close';
+      // const template = 'image-only';
+      // const template = 'image-centered';
+      // const template = 'square';
+      const template = 'centered';
+      // const template = 'bottom-bar';
+
+      const s = document.createElement('script');
+      s.id = '_codefund_js';
+      s.src = `//codefund.app/properties/193/funder.js?template=${template}`;
+      s.async = 'async';
+      this.$el.appendChild(s);
+    },
+  },
+};
+</script>

docs/.vuepress/theme/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extend: '@vuepress/theme-default',
+};

docs/.vuepress/theme/layouts/Layout.vue

@@ -0,0 +1,27 @@
+<template>
+  <ParentLayout>
+    <CodeFund slot="sidebar-top"/>
+  </ParentLayout>
+</template>
+
+<script>
+import ParentLayout from '@parent-theme/layouts/Layout.vue'
+import CodeFund from '../components/CodeFund.vue'
+
+export default {
+  components: {
+    ParentLayout,
+    CodeFund
+  }
+}
+</script>
+
+<style>
+  #codefund {
+    border-bottom: 1px solid #eaecef;
+    min-height: 115px;
+  }
+  #codefund + .sidebar-links {
+    padding-top: 1rem;
+  }
+</style>

package.json

@@ -30,6 +30,8 @@
     "@babel/preset-env": "^7.4.2",
     "@babel/runtime": "^7.4.2",
     "@vue/test-utils": "^1.0.0-beta.29",
+    "@vuepress/plugin-google-analytics": "^1.0.0-alpha.47",
+    "@vuepress/plugin-pwa": "^1.0.0-alpha.47",
     "autoprefixer": "^9.4.7",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
@@ -59,7 +61,7 @@
     "vue-server-renderer": "^2.6.10",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
-    "vuepress": "^0.14.10",
+    "vuepress": "^1.0.0-alpha.47",
     "vuex": "^3.1.0",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",