Merge branch 'master' of github.com:vuejs/docs-next

Author: NataliaTepluhina

README.md

@@ -1,8 +1,14 @@
-# vuejs.org next
+# v3.vuejs.org
 
-This repo contains the code for the future VuePress version of the vuejs.org docs. A continuously deployed live preview is available at https://vue-docs-next-preview.netlify.com/.
+This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is written in Markdown format located in `src`.
 
-## Getting Setup
+## Writing
+
+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
 
@@ -21,3 +27,7 @@ yarn # or npm install
 ```bash
 yarn serve
 ```
+
+## Deploying
+
+The site is automatically deployed when commits land in `master`, via [Netlify](https://www.netlify.com/).

src/.vuepress/components/BetaBanner.vue

@@ -5,17 +5,18 @@ export default {}
 <template>
   <aside class="beta-banner">
     <p>
-      ⚠️ Beta Version: Docs are still under development and are subject to
-      change.
+      ⚠️ Beta Version: Docs are in development and subject to change.
     </p>
   </aside>
 </template>
 
 <style lang="scss" scoped>
+@import '../theme/styles/mixins.scss';
+
 .beta-banner {
   position: fixed;
   z-index: 20;
-  top: 3.6rem;
+  top: 0;
   left: 0;
   right: 0;
   display: flex;
@@ -24,14 +25,22 @@ export default {}
   background-color: #fffedb;
   box-sizing: border-box;
   border-bottom: 1px solid #eaecef;
-  font-weight: bold;
   text-align: center;
   padding: 10px 20px;
   box-sizing: border-box;
 
   p {
     margin: 0;
     line-height: 1.4;
+    font-size: 0.7rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include breakpoint(700px) {
+      font-size: 0.8rem;
+    }
   }
 }
 </style>

src/.vuepress/config.js

@@ -159,7 +159,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Inter:300,400,600|Open+Sans:400,600;display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
@@ -199,13 +199,35 @@ module.exports = {
       },
       { text: 'API Reference', link: '/api/application-config' },
       {
-        text: 'Community',
-        ariaLabel: 'Community Menu',
+        text: 'Ecosystem',
         items: [
-          { text: 'Team', link: '/community/team/' },
-          { text: 'Partners', link: '/community/partners/' },
-          { text: 'Join', link: '/community/join/' },
-          { text: 'Themes', link: '/community/themes/' }
+          {
+            text: 'Community',
+            ariaLabel: 'Community Menu',
+            items: [
+              { text: 'Team', link: '/community/team/' },
+              { text: 'Partners', link: '/community/partners/' },
+              { text: 'Join', link: '/community/join/' },
+              { text: 'Themes', link: '/community/themes/' }
+            ]
+          },
+          {
+            text: 'Official Projects',
+            items: [
+              { text: 'Vue Router', link: 'https://router.vuejs.org/' },
+              { text: 'Vuex', link: 'https://vuex.vuejs.org/' },
+              { text: 'Vue CLI', link: 'https://cli.vuejs.org/' },
+              {
+                text: 'Vue Test Utils',
+                link: 'https://vue-test-utils.vuejs.org/'
+              },
+              {
+                text: 'Devtools',
+                link: 'https://github.com/vuejs/vue-devtools'
+              },
+              { text: 'Weekly news', link: 'https://news.vuejs.org/' }
+            ]
+          }
         ]
       }
     ],

src/.vuepress/styles/index.styl

@@ -166,3 +166,7 @@
   color: #fff;
   padding: 0.25rem 0.25rem;
 }
+
+.dropdown-wrapper .nav-dropdown .dropdown-item h4 {
+  margin-bottom: 0.3rem!important;
+}

src/.vuepress/theme/components/NavLinks.vue

@@ -1,22 +1,9 @@
 <template>
-  <nav
-    v-if="userLinks.length || repoLink"
-    class="nav-links"
-  >
+  <nav v-if="userLinks.length || repoLink" class="nav-links">
     <!-- user links -->
-    <div
-      v-for="item in userLinks"
-      :key="item.link"
-      class="nav-item"
-    >
-      <DropdownLink
-        v-if="item.type === 'links'"
-        :item="item"
-      />
-      <NavLink
-        v-else
-        :item="item"
-      />
+    <div v-for="item in userLinks" :key="item.link" class="nav-item">
+      <DropdownLink v-if="item.type === 'links'" :item="item" />
+      <NavLink v-else :item="item" />
     </div>
 
     <!-- repo link -->
@@ -47,11 +34,11 @@ export default {
   },
 
   computed: {
-    userNav () {
+    userNav() {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
     },
 
-    nav () {
+    nav() {
       const { locales } = this.$site
       if (locales && Object.keys(locales).length > 1) {
         const currentLink = this.$page.path
@@ -62,7 +49,8 @@ export default {
           ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
           items: Object.keys(locales).map(path => {
             const locale = locales[path]
-            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            const text =
+              (themeLocales[path] && themeLocales[path].label) || locale.lang
             let link
             // Stay on the current page
             if (locale.lang === this.$lang) {
@@ -83,25 +71,23 @@ export default {
       return this.userNav
     },
 
-    userLinks () {
+    userLinks() {
       return (this.nav || []).map(link => {
         return Object.assign(resolveNavLinkItem(link), {
           items: (link.items || []).map(resolveNavLinkItem)
         })
       })
     },
 
-    repoLink () {
+    repoLink() {
       const { repo } = this.$site.themeConfig
       if (repo) {
-        return /^https?:/.test(repo)
-          ? repo
-          : `https://github.com/${repo}`
+        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`
       }
       return null
     },
 
-    repoLabel () {
+    repoLabel() {
       if (!this.repoLink) return
       if (this.$site.themeConfig.repoLabel) {
         return this.$site.themeConfig.repoLabel
@@ -128,6 +114,7 @@ export default {
   a
     line-height 1.4rem
     color inherit
+    font-weight 500
     &:hover, &.router-link-active
       color $accentColor
   .nav-item

src/.vuepress/theme/components/Sidebar.vue

@@ -42,7 +42,7 @@ export default {
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
   & > .sidebar-links
-    padding calc(1.5rem + 3rem) 0 // add $betaBannerHeight
+    padding 1.5rem 0
     & > li > a.sidebar-link
       font-size 1.1em
       line-height 1.7

src/.vuepress/theme/styles/index.styl

@@ -23,7 +23,7 @@ body
 .navbar
   position fixed
   z-index 20
-  top 0
+  top 37px
   left 0
   right 0
   height $navbarHeight
@@ -110,7 +110,7 @@ strong
   font-weight 600
 
 h1, h2, h3, h4, h5, h6
-  font-weight 600
+  font-weight 500
   line-height 1.25
 
   {$contentClass}:not(.custom) > &
@@ -135,6 +135,7 @@ h1, h2, h3, h4, h5, h6
 
 h1
   font-size 2.2rem
+  font-weight 600
 
 h2
   font-size 1.65rem