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

Author: NataliaTepluhina

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+## Note
+
+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 and we are not ready for additional contributions yet.
+
+To bring your issue to the team's attention though, we would recommend [creating an issue](https://github.com/vuejs/docs-next/issues/new) and we'll get to it when we can.
+
+Thanks for your understanding!

src/.vuepress/components/BetaBanner.vue

@@ -6,9 +6,32 @@ export default {}
   <aside class="beta-banner">
     <p>
       ⚠️ Beta Version: Docs are still under development and are subject to
-      change. ⚠️
+      change.
     </p>
   </aside>
 </template>
 
-<style></style>
+<style lang="scss" scoped>
+.beta-banner {
+  position: fixed;
+  z-index: 20;
+  top: 3.6rem;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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;
+  }
+}
+</style>

src/.vuepress/config.js

@@ -159,7 +159,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
@@ -210,7 +210,7 @@ module.exports = {
       }
     ],
     repo: 'vuejs/docs-next',
-    editLinks: true,
+    editLinks: false,
     editLinkText: 'Edit this on GitHub!',
     docsDir: 'src',
     sidebarDepth: 2,

src/.vuepress/styles/index.styl

@@ -125,21 +125,6 @@
   }
 }
 
-.beta-banner
-  position fixed
-  z-index 20
-  top $navbarHeight
-  left 0
-  right 0
-  height 3rem
-  display flex
-  align-items center
-  justify-content center
-  background-color #fffedb
-  box-sizing border-box
-  border-bottom 1px solid $borderColor
-  font-weight bold
-
 .scrimba,
 .vueschool {
   background-color: #e7ecf3;

src/.vuepress/theme/components/Home.vue

@@ -143,6 +143,10 @@ export default {
 <style lang="scss">
 @import '@theme/styles/_settings.scss';
 
+.home {
+  font-family: $fontHome;
+}
+
 .hero {
   padding: calc(100px + 3rem) 40px 30px; // add $betaBannerHeight
 

src/.vuepress/theme/components/PageEdit.vue

@@ -1,20 +1,26 @@
 <template>
   <footer class="page-edit">
-    <div v-if="editLink" class="edit-link">
-      Caught a mistake or want to contribute to the documentation?
-      <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
-        editLinkText
-      }}</a>
-      <OutboundLink />
-    </div>
-
-    <div>
-      Deployed on <a href="https://url.netlify.com/HJ8X2mxP8">Netlify</a>
-    </div>
-
-    <div v-if="lastUpdated" class="last-updated">
-      <span class="prefix">{{ lastUpdatedText }}:</span>
-      <span class="time">{{ lastUpdated }}</span>
+    <div class="container">
+      <p>
+        Deployed on
+        <a href="https://url.netlify.com/HJ8X2mxP8">Netlify</a>.
+        <span v-if="editLink" class="edit-link">
+          Caught a mistake or want to contribute to the documentation?
+          <a
+            :href="editLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ editLinkText }}
+            <OutboundLink />
+          </a>
+        </span>
+        <template v-if="lastUpdated" class="last-updated">
+          <br />
+          <span class="prefix">{{ lastUpdatedText }}:</span>
+          <span class="time">{{ lastUpdated }}</span>
+        </template>
+      </p>
     </div>
   </footer>
 </template>
@@ -104,7 +110,9 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+@import '@theme/styles/_settings.scss';
+
 /*
   This entire style block is MVP style wise and will likely
   be changed with the new atomic theme. Changes are welcome!
@@ -115,10 +123,20 @@ export default {
 
 .page-edit {
   padding: 0 1.5rem;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
   max-width: 740px;
   margin: 0 auto;
+  font-size: 0.95em;
+  color: $light;
+  text-align: center;
+
+  p {
+    margin: 0.8rem auto;
+  }
+
+  .container {
+    border: 1px solid #eaecef;
+    border-radius: 5px;
+    padding: 0 1.5rem;
+  }
 }
 </style>

src/.vuepress/theme/components/PageNav.vue

@@ -1,13 +1,7 @@
 <template>
-  <div
-    v-if="prev || next"
-    class="page-nav"
-  >
+  <div v-if="prev || next" class="page-nav">
     <p class="inner">
-      <span
-        v-if="prev"
-        class="prev"
-      >
+      <span v-if="prev" class="prev">
         ←
         <a
           v-if="prev.type === 'external'"
@@ -17,41 +11,24 @@
           rel="noopener noreferrer"
         >
           {{ prev.title || prev.path }}
-
           <OutboundLink />
         </a>
 
-        <RouterLink
-          v-else
-          class="prev"
-          :to="prev.path"
-        >
-          {{ prev.title || prev.path }}
-        </RouterLink>
+        <RouterLink v-else class="prev" :to="prev.path">{{ prev.title || prev.path }}</RouterLink>
       </span>
 
-      <span
-        v-if="next"
-        class="next"
-      >
+      <span v-if="next" class="next">
         <a
           v-if="next.type === 'external'"
           :href="next.path"
           target="_blank"
           rel="noopener noreferrer"
         >
           {{ next.title || next.path }}
-
           <OutboundLink />
         </a>
 
-        <RouterLink
-          v-else
-          :to="next.path"
-        >
-          {{ next.title || next.path }}
-        </RouterLink>
-        →
+        <RouterLink v-else :to="next.path">{{ next.title || next.path }}</RouterLink>→
       </span>
     </p>
   </div>
@@ -68,21 +45,21 @@ export default {
   props: ['sidebarItems'],
 
   computed: {
-    prev () {
+    prev() {
       return resolvePageLink(LINK_TYPES.PREV, this)
     },
 
-    next () {
+    next() {
       return resolvePageLink(LINK_TYPES.NEXT, this)
     }
   }
 }
 
-function resolvePrev (page, items) {
+function resolvePrev(page, items) {
   return find(page, items, -1)
 }
 
-function resolveNext (page, items) {
+function resolveNext(page, items) {
   return find(page, items, 1)
 }
 
@@ -99,7 +76,7 @@ const LINK_TYPES = {
   }
 }
 
-function resolvePageLink (
+function resolvePageLink(
   linkType,
   { $themeConfig, $page, $route, $site, sidebarItems }
 ) {
@@ -123,7 +100,7 @@ function resolvePageLink (
   }
 }
 
-function find (page, items, offset) {
+function find(page, items, offset) {
   const res = []
   flatten(items, res)
   for (let i = 0; i < res.length; i++) {
@@ -134,7 +111,7 @@ function find (page, items, offset) {
   }
 }
 
-function flatten (items, res) {
+function flatten(items, res) {
   for (let i = 0, l = items.length; i < l; i++) {
     if (items[i].type === 'group') {
       flatten(items[i].children || [], res)
@@ -146,18 +123,22 @@ function flatten (items, res) {
 </script>
 
 <style lang="stylus">
-@require '../styles/wrapper.styl'
-
-.page-nav
-  @extend $wrapper
-  padding-top 1rem
-  padding-bottom 0
-  .inner
-    min-height 2rem
-    margin-top 0
-    border-top 1px solid $borderColor
-    padding-top 1rem
-    overflow auto // clear float
-  .next
-    float right
+@require '../styles/wrapper.styl';
+
+.page-nav {
+  @extend $wrapper;
+  padding-top: 1rem;
+  padding-bottom: 0;
+
+  .inner {
+    min-height: 2rem;
+    margin-top: 0;
+    padding-top: 1rem;
+    overflow: auto; // clear float
+  }
+
+  .next {
+    float: right;
+  }
+}
 </style>

src/.vuepress/theme/components/sponsors/PatreonSponsors.vue

@@ -26,7 +26,7 @@
         </a>
       </div>
 
-      <RoundedButton url="/support-vuejs/">Become a Sponsor!</RoundedButton>
+      <RoundedButton url="https://vuejs.org/support-vuejs/">Become a Sponsor!</RoundedButton>
     </template>
   </SponsorsLayout>
 </template>

src/.vuepress/theme/components/ui/SocialIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <a class="social-icon" :href="link" :title="type" :class="extraClass">
-    <i class="fab" :class="iconClass"/>
+    <i class="fa" :class="iconClass" />
     <span class="sr-only">{{ type }}</span>
   </a>
 </template>
@@ -15,7 +15,7 @@ const SOCIAL_ICON_CLASS_MAP = {
   Facebook: 'fa-facebook-square',
   Instagram: 'fa-instagram',
   CodePen: 'fa-codepen',
-  Medium: 'fa-medium-m'
+  Medium: 'fa-medium'
 }
 
 export default {
@@ -37,7 +37,7 @@ export default {
   },
 
   computed: {
-    iconClass () {
+    iconClass() {
       return SOCIAL_ICON_CLASS_MAP[this.type]
     }
   }
@@ -46,23 +46,30 @@ export default {
 
 <style lang="scss" scoped>
 .fa {
-  &-github, &-codepen, &-envelope {
+  &-github,
+  &-codepen,
+  &-envelope {
     color: #000;
   }
 
-  &-twitter, &-twitter-square {
+  &-twitter,
+  &-twitter-square {
     color: #1da1f3;
   }
 
-  &-linkedin, &-linkedin-square {
+  &-linkedin,
+  &-linkedin-square {
     color: #0077b5;
   }
 
-  &-facebook, &-facebook-square {
+  &-facebook,
+  &-facebook-square {
     color: #3b5998;
   }
 
-  &-youtube, &-youtube-play, &-youtube-square {
+  &-youtube,
+  &-youtube-play,
+  &-youtube-square {
     color: #f00;
   }
 

src/.vuepress/theme/styles/_settings.scss

@@ -12,3 +12,6 @@ $info: #1c90f3;
 $MQNarrow: 959px;
 $MQMobile: 719px;
 $MQMobileNarrow: 419px;
+
+$fontHome: 'Open Sans', 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue,
+  sans-serif;