Merge branch 'master' into docs/18-add-deployment-page

Author: bencodezen

.github/pull_request_template.md

@@ -1,9 +1,5 @@
-# ⚠️⚠️⚠️ DISCLAIMER ⚠️⚠️⚠️:
+## Description of Problem
 
-Thanks for your interest in submitting a PR! At this time, because the docs are in beta, the team is currently in the midst of changes. As a result, **we are not ready for additional contributions yet**.
+## Proposed Solution
 
-## How can I provide feedback?
-
-To be respectful of your time and ideas, **please [create an issue](https://github.com/vuejs/docs-next/issues/new) instead of a pull request**. Otherwise, we will have to simply close your pull request at this time.
-
-Thanks for your understanding!
+## Additional Information

README.md

@@ -6,8 +6,6 @@ This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is
 
 See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation.
 
-> The docs are in beta: The team is currently in the midst of changes and we are not ready for additional contributions yet. All content is subject to change. If you see a problem that you would like to bring to our attention, please [create an issue](https://github.com/vuejs/docs-next/issues/new) and we will get to it when we can. You may want to wait until the content is finalized, though.
-
 ## Developing
 
 1. Clone repository

assets/transitions-diagram.ai.zip

@@ -1,14 +1,19 @@
 {
   "devDependencies": {
+    "@vuepress/plugin-pwa": "^1.5.4",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
-    "vuepress": "^1.3.0"
+    "vuepress": "^1.5.4"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src"
   },
   "dependencies": {
+    "@docsearch/css": "^1.0.0-alpha.27",
+    "@docsearch/js": "^1.0.0-alpha.27",
+    "algoliasearch": "^4.4.0",
     "axios": "^0.19.1",
     "intersection-observer": "^0.11.0",
     "showdown": "^1.9.1"

package.json

@@ -1,11 +1,7 @@
 <template>
   <ClientOnly>
-    <aside class="beta-banner" v-if="shouldShow">
-      <p>
-        <span class="hide-sm">⚠️ Beta Version:</span>
-        Docs
-        <span class="hide-sm">are</span> in development and subject to change.
-      </p>
+    <aside class="app-banner" v-if="shouldShow">
+      <slot></slot>
       <button ref="closeButton" @click="close">Close</button>
     </aside>
   </ClientOnly>
@@ -39,7 +35,7 @@ export default {
 <style lang="scss" scoped>
 @import '../theme/styles/mixins.scss';
 
-.beta-banner {
+.app-banner {
   position: fixed;
   z-index: 21;
   top: 0;

src/.vuepress/components/BetaBanner.vue renamed to src/.vuepress/components/AppBanner.vue

@@ -7,7 +7,7 @@ export default {
       type: Array,
       default: () => [],
       validator(value) {
-        return validBadges.includes(value)
+        return value.every(badge => validBadges.includes(badge))
       }
     }
   }

src/.vuepress/components/MigrationBadges.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="video-lesson">
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot></slot>
+    </a>
+  </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+  display: flex;
+  align-items: center;
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left: 16px;
+  }
+
+  &::before {
+    content: '\f144';
+    font-family: 'FontAwesome';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}
+</style>

src/.vuepress/components/VideoLesson.vue

@@ -1,14 +1,18 @@
 <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;">
+      <div
+        class="video-space"
+        style="padding: 56.25% 0 0 0; position: relative;"
+      >
         <iframe
-          src="https://player.vimeo.com/video/247494684?dnt=1"
+          src="https://player.vimeo.com/video/455611549?dnt=1"
           style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
           frameborder="0"
           webkitallowfullscreen
           mozallowfullscreen
           allowfullscreen
+          allow="autoplay"
           ref="videoIframe"
         ></iframe>
       </div>
@@ -20,14 +24,15 @@
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Vue Mastery</a>.
-        Watch Vue Mastery’s free
+          >Vue Mastery</a
+        >. Watch Vue Mastery’s free
         <a
-          href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
+          href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Intro to Vue course</a>.
+          >Intro to Vue course</a
+        >.
       </p>
     </div>
   </div>
@@ -47,7 +52,7 @@ export default {
   }),
 
   methods: {
-    initVideoModal () {
+    initVideoModal() {
       const modalButton = document.querySelector(this.triggerSelector)
       const player = new Vimeo.Player(this.$refs.videoIframe)
 
@@ -59,7 +64,11 @@ export default {
       })
 
       document.body.addEventListener('click', event => {
-        if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+        if (
+          this.isOpen &&
+          event.target !== modalButton &&
+          !this.$refs.modal.contains(event.target)
+        ) {
           this.isOpen = false
           document.body.classList.remove('stop-scroll')
           player.pause()
@@ -68,7 +77,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     if (typeof window !== 'undefined') {
       this.initVideoModal()
     }
@@ -77,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@theme/styles/_settings.scss";
+@import '@theme/styles/_settings.scss';
 
 .modal {
   box-sizing: border-box;

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

@@ -252,7 +252,7 @@ const members = [
       languages: ['uk', 'ru', 'en'],
       reposOfficial: ['vuejs.org', 'vue-cli'],
       work: {
-        role: 'Senior Frontend Engineer',
+        role: 'Staff Frontend Engineer',
         org: 'GitLab',
         orgUrl: 'https://gitlab.com/'
       },
@@ -299,6 +299,16 @@ const members = [
       twitter: 'KiaKing85',
       reposOfficial: ['vuex'],
       reposPersonal: ['vuex-orm/*']
+    },
+    {
+      name: 'Anthony Fu',
+      city: 'Taipei, Taiwan',
+      languages: ['zh', 'en'],
+      github: 'antfu',
+      twitter: 'antfu7',
+      reposOfficial: ['composition-api'],
+      reposPersonal: ['vueuse', 'vue-demi', 'vue-reactivity/*'],
+      links: ['https://antfu.me/']
     }
   ])
 )

src/.vuepress/components/community/team/members.js

@@ -180,5 +180,54 @@ export default [
         image: 'https://www.primefaces.org/vue-templates/sigma.jpg'
       }
     ]
+  },
+  {
+    name: 'Flatlogic',
+    description: `Check the admin dashboards templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications is built. Additionally these templates will help you to start a new application and save you time and money.`,
+    seeMoreUrl: 'https://flatlogic.com/templates?ref=x-fdkuTAVW',
+    products: [
+      {
+        name: 'Sing App Vue',
+        price: 99,
+        description: 'Vue Admin Dashboard Template',
+        url: 'https://flatlogic.com/templates/sing-app-vue?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/sing_vue_full-cb6b9fdd0465a0d60c0fafa2deca1929cc4966957c8e1ce57565a5e2f45ff043.webp'
+      },
+      {
+        name: 'Sing App Vue Node.js',
+        price: 149,
+        description: 'Vue Admin Dashboard Template with Node.JS Backend',
+        url: 'https://flatlogic.com/templates/sing-app-vue-node-js?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/sing_vue_full_nodejs-78af09220a2d085fec9bbc1071879915b30737f25d72669152f3b090291609aa.webp'
+      },
+      {
+        name: 'Light Blue Vue',
+        price: 99,
+        description: 'Vue Admin Dashboard Template',
+        url: 'https://flatlogic.com/templates/light-blue-vue?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/light_blue_vue_full-e044d30242912d5756b190e576bf30ea967b725c09d2e371a7eabf1c6a9c33b2.webp'
+      },
+      {
+        name: 'Light Blue Vue Admin',
+        price: 0,
+        description: 'Free and Open Source Vue JS Template for Admin Dashboard',
+        url: 'https://flatlogic.com/templates/light-blue-vue-lite?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/light_blue_vue_lite-c1937a2a01e5e8e8ede29a3ead011126e9dab5c58b9017daefe36411f9a1089e.webp'
+      },
+      {
+        name: 'Sing App Vue Dashboard',
+        price: 0,
+        description: 'Free and Open Source Vue.js Admin Dashboard Template',
+        url: 'https://flatlogic.com/templates/sing-app-vue-dashboard?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/sing_vue_lite-ae3ec037404bc9ae29599a16afe276e638bd916713d75946c604feb69323ec21.webp'
+      },
+      {
+        name: 'Light Blue Vue Node.js',
+        price: 149,
+        description: 'Vue Admin Template with Node.JS Backend',
+        url: 'https://flatlogic.com/templates/light-blue-vue-node-js?ref=x-fdkuTAVW',
+        image: 'https://flatlogic.com/assets/templates/light_blue_vue_full_nodejs-06f941c849f0a83a3c0d38c728101eace06a7515ea048f12bcd91f165280246f.webp'
+      }
+    ]
   }
 ]