Merge pull request #2 from vuejs/master

sync

Author: Abiel1024

.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

assets/transitions-diagram.ai.zip

@@ -1,10 +1,12 @@
 {
   "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"
   },

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

@@ -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

@@ -11,14 +11,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>
@@ -60,7 +61,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     if (typeof window !== 'undefined') {
       this.initVideoModal()
     }
@@ -69,7 +70,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

@@ -1,10 +1,13 @@
 const sidebar = {
-  cookbook: [{
-    title: 'Cookbook',
-    collapsable: false,
-    children: ['/cookbook/', '/cookbook/editable-svg-icons']
-  }],
-  guide: [{
+  cookbook: [
+    {
+      title: 'Cookbook',
+      collapsable: false,
+      children: ['/cookbook/', '/cookbook/editable-svg-icons']
+    }
+  ],
+  guide: [
+    {
       title: '基础',
       collapsable: false,
       children: [
@@ -60,7 +63,8 @@ const sidebar = {
     {
       title: '高阶指南',
       collapsable: false,
-      children: [{
+      children: [
+        {
           title: '响应性',
           children: [
             '/guide/reactivity',
@@ -88,7 +92,8 @@ const sidebar = {
       children: [
         '/guide/single-file-component',
         '/guide/testing',
-        '/guide/typescript-support'
+        '/guide/typescript-support',
+        '/guide/mobile'
       ]
     },
     {
@@ -177,21 +182,23 @@ const sidebar = {
     },
     '/api/composition-api'
   ],
-  examples: [{
-    title: '示例',
-    collapsable: false,
-    children: [
-      '/examples/markdown',
-      '/examples/commits',
-      '/examples/grid-component',
-      '/examples/tree-view',
-      '/examples/svg',
-      '/examples/modal',
-      '/examples/elastic-header',
-      '/examples/select2',
-      '/examples/todomvc'
-    ]
-  }]
+  examples: [
+    {
+      title: '示例',
+      collapsable: false,
+      children: [
+        '/examples/markdown',
+        '/examples/commits',
+        '/examples/grid-component',
+        '/examples/tree-view',
+        '/examples/svg',
+        '/examples/modal',
+        '/examples/elastic-header',
+        '/examples/select2',
+        '/examples/todomvc'
+      ]
+    }
+  ]
 }
 
 module.exports = {
@@ -201,21 +208,48 @@ module.exports = {
     [
       'link',
       {
-        href: 'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+        href:
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
     [
       'link',
       {
-        href: 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+        href:
+          'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
         rel: 'stylesheet'
       }
     ],
-    ['link', {
-      rel: 'icon',
-      href: '/logo.png'
-    }],
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: '/logo.png'
+      }
+    ],
+    ['link', { rel: 'manifest', href: '/manifest.json' }],
+    ['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: '/images/icons/apple-icon-152x152.png'
+      }
+    ],
+    [
+      'meta',
+      {
+        name: 'msapplication-TileImage',
+        content: '/images/icons/ms-icon-144x144.png'
+      }
+    ],
+    ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
     // localization for china
     [
       'script',
@@ -226,10 +260,12 @@ module.exports = {
   ],
   themeConfig: {
     logo: '/logo.png',
-    nav: [{
+    nav: [
+      {
         text: '文档',
         ariaLabel: '文档菜单',
-        items: [{
+        items: [
+          {
             text: '教程',
             link: '/guide/introduction'
           },
@@ -257,10 +293,12 @@ module.exports = {
       },
       {
         text: '生态系统',
-        items: [{
+        items: [
+          {
             text: '社区',
             ariaLabel: '社区菜单',
-            items: [{
+            items: [
+              {
                 text: '团队',
                 link: '/community/team/'
               },
@@ -280,7 +318,8 @@ module.exports = {
           },
           {
             text: '官方项目',
-            items: [{
+            items: [
+              {
                 text: 'Vue Router',
                 link: 'https://next.router.vuejs.org/'
               },
@@ -294,7 +333,8 @@ module.exports = {
               },
               {
                 text: 'Vue Test Utils',
-                link: 'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
+                link:
+                  'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
               },
               {
                 text: 'Devtools',
@@ -311,7 +351,8 @@ module.exports = {
       {
         text: '支持 Vue',
         link: '/support-vuejs/',
-        items: [{
+        items: [
+          {
             text: '一次性捐款',
             link: '/support-vuejs/#one-time-donations'
           },