Migrate Homepage (#71)

Migrated the homepage over to docs-next.

As the default VuePress theme is not flexible enough to support the current homepage's layout (most notably the jumbotron/hero area), I've created a (minimal) custom theme instead. This theme also supports HTML in the tagline, feature blocks, and footer, allowing us to have e.g. newlines and links in these elements. I've also gone ahead and moved some custom components like SocialIcon down (up?) to the theme level.

The result will not be a 1:1 copycat of current vuejs.org UI, with the most significant difference being the fonts. We'll need to come back and revise this once a new theme for Vue 3 docs is available. Also, a mocked Patreon sponsor list is being used after a discussion with Evan. Other functionalities should be in place.

Author: phanan

.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: [