Migrate Homepage

.gitignore

@@ -100,4 +100,4 @@ dist/
 
 # Temporary folders
 tmp/
-temp/
+temp/

src/.vuepress/components/common/vuemastery-video-modal.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="overlay" v-show="isOpen">
+    <div ref="modal" class="modal" :class="{ open: isOpen }">
+      <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
+        <iframe
+          src="https://player.vimeo.com/video/247494684?dnt=1"
+          style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
+          frameborder="0"
+          webkitallowfullscreen
+          mozallowfullscreen
+          allowfullscreen
+          ref="videoIframe"
+        ></iframe>
+      </div>
+
+      <p class="modal-text">
+        Video by
+        <a
+          href="https://www.vuemastery.com"
+          target="_blank"
+          rel="sponsored noopener"
+          title="Vue.js Courses on Vue Mastery"
+        >Vue Mastery</a>.
+        Watch Vue Mastery’s free
+        <a
+          href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
+          target="_blank"
+          rel="sponsored noopener"
+          title="Vue.js Courses on Vue Mastery"
+        >Intro to Vue course</a>.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    triggerSelector: {
+      type: String,
+      default: '.vuemastery-trigger'
+    }
+  },
+
+  data: () => ({
+    isOpen: false
+  }),
+
+  methods: {
+    initVideoModal () {
+      const modalButton = document.querySelector(this.triggerSelector)
+      const player = new Vimeo.Player(this.$refs.videoIframe)
+
+      modalButton.addEventListener('click', event => {
+        event.stopPropagation()
+        this.isOpen = true
+        document.body.classList.toggle('stop-scroll')
+        player.play()
+      })
+
+      document.body.addEventListener('click', event => {
+        if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+          this.isOpen = false
+          document.body.classList.remove('stop-scroll')
+          player.pause()
+        }
+      })
+    }
+  },
+
+  mounted () {
+    if (typeof window !== 'undefined') {
+      this.initVideoModal()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@theme/styles/_settings.scss";
+
+.modal {
+  box-sizing: border-box;
+  position: fixed;
+  width: 75%;
+  height: auto;
+  padding: 0.5em;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+}
+
+.modal-text {
+  margin-bottom: 0.5em;
+  text-align: center;
+
+  > a {
+    color: $green;
+    font-weight: 600;
+  }
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 98;
+}
+
+.stop-scroll {
+  overflow: hidden;
+  height: 100%;
+}
+
+@media screen and (max-width: $MQMobileNarrow) {
+  .modal {
+    width: 98%;
+  }
+}
+</style>

src/.vuepress/components/community/partners/partner-item.vue

@@ -48,8 +48,8 @@
         </dd>
 
         <dd class="social">
-          <SocialIcon v-if="partner.email" type="Email" :url="mailHref"/>
-          <SocialIcon v-for="link in partner.socialLinks" :key="link.name" :type="link.name" :url="link.url"/>
+          <SocialIcon v-if="partner.email" type="Email" :link="mailHref"/>
+          <SocialIcon v-for="link in partner.socialLinks" :key="link.name" :type="link.name" :link="link.url"/>
         </dd>
       </dl>
     </div>
@@ -63,7 +63,7 @@ export default {
   },
 
   components: {
-    SocialIcon: () => import('../../common/social-icon')
+    SocialIcon: () => import('@theme/components/ui/SocialIcon.vue')
   },
 
   computed: {

src/.vuepress/components/community/team/vuer-profile.vue

@@ -98,10 +98,10 @@
           </dd>
         </template>
         <footer v-if="hasSocialLinks" class="social">
-          <SocialIcon type="GitHub" v-if="profile.github" :url="generateGithubUrl(profile.github)"/>
-          <SocialIcon type="Twitter" v-if="profile.twitter" :url="`https://twitter.com/${profile.twitter}`"/>
-          <SocialIcon type="CodePen" v-if="profile.codepen" :url="`https://codepen.io/${profile.codepen}`"/>
-          <SocialIcon type="LinkedIn" v-if="profile.linkedin" :url="`https://www.linkedin.com/in/${profile.linkedin}`"/>
+          <SocialIcon type="GitHub" v-if="profile.github" :link="generateGithubUrl(profile.github)"/>
+          <SocialIcon type="Twitter" v-if="profile.twitter" :link="`https://twitter.com/${profile.twitter}`"/>
+          <SocialIcon type="CodePen" v-if="profile.codepen" :link="`https://codepen.io/${profile.codepen}`"/>
+          <SocialIcon type="LinkedIn" v-if="profile.linkedin" :link="`https://www.linkedin.com/in/${profile.linkedin}`"/>
         </footer>
       </dl>
     </div>
@@ -114,7 +114,7 @@ import { minimizeLink, generateGithubUrl, kmToMi, roundDistance } from './utils'
 export default {
   components: {
     VuerLanguage: () => import('./vuer-language'),
-    SocialIcon: () => import('../../common/social-icon')
+    SocialIcon: () => import('@theme/components/ui/SocialIcon.vue')
   },
 
   props: {

src/.vuepress/components/community/themes/theme-item.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/_settings";
+@import "@theme/styles/_settings.scss";
 
 .item-preview {
   width: 290px;

src/.vuepress/components/community/themes/theme-provider.vue

@@ -9,9 +9,9 @@
     </div>
 
     <div class="see-more-container">
-      <a :href="provider.seeMoreUrl" class="see-more-button">
+      <RoundedButton :url="provider.seeMoreUrl">
         See More Themes from {{ provider.name }}
-      </a>
+      </RoundedButton>
     </div>
   </section>
 </template>
@@ -28,19 +28,20 @@ export default {
   },
 
   components: {
-    ThemeItem: () => import('./theme-item')
+    ThemeItem: () => import('./theme-item.vue'),
+    RoundedButton: () => import('@theme/components/ui/RoundedButton.vue')
   },
 
   computed: {
-    description: function () {
+    description () {
       return (new showdown.Converter()).makeHtml(this.provider.description)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/_settings";
+@import "@theme/styles/_settings.scss";
 
 .themes-grid {
   display: flex;
@@ -61,21 +62,5 @@ export default {
     text-align: center;
     width: 100%;
   }
-
-  &-button {
-    color: $green;
-    display: inline-block;
-    width: auto;
-    border-radius: 2em;
-    transition: all 0.15s ease;
-    border: 1px solid $green;
-    padding: 12px 24px;
-    text-decoration: none !important;
-
-    &:hover {
-      background: $green;
-      color: #fff;
-    }
-  }
 }
 </style>

src/.vuepress/config.js

@@ -54,11 +54,23 @@ module.exports = {
     [
       'link',
       {
-        href:
-          'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+        href: 'https://use.fontawesome.com/releases/v5.13.0/css/all.css',
         rel: 'stylesheet',
       },
     ],
+    [
+      'script',
+      {
+        src: 'https://player.vimeo.com/api/player.js',
+      },
+    ],
+    [
+      'script',
+      {
+        src: 'https://extend.vimeocdn.com/ga/72160148.js',
+        defer: 'defer',
+      },
+    ]
   ],
   themeConfig: {
     nav: [