vuejs · sdras · Oct 3, 2019 · Sep 27, 2019
diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md
diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md
@@ -7,7 +7,7 @@ order: 6
 A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
 
 ## Binding HTML Classes
-<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Dynamic Classes Lesson">Watch a free video lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Dynamic Classes Lesson">Watch a free video lesson on Vue School</a></div>
 
 ### Object Syntax
 

diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
@@ -201,7 +201,7 @@ Check out more details on `<keep-alive>` in the [API reference](../api/#keep-ali
 
 ## Async Components
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Async Components lesson">Watch a free video lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Async Components lesson">Watch a free video lesson on Vue School</a></div>
 
 In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
 

diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
@@ -6,7 +6,7 @@ order: 101
 
 > This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Component Registration lesson">Watch a free video lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Component Registration lesson">Watch a free video lesson on Vue School</a></div>
 
 ## Component Names
 

diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
@@ -4,7 +4,7 @@ type: guide
 order: 11
 ---
 
-<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Components Fundamentals Course">Watch a free video course on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Components Fundamentals Course">Watch a free video course on Vue School</a></div>
 
 ## Base Example
 

diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md
@@ -6,7 +6,7 @@ order: 302
 
 ## Intro
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/create-vuejs-directive?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Custom Directives lesson">Watch a free video lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/create-vuejs-directive?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Custom Directives lesson">Watch a free video lesson on Vue School</a></div>
 
 In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:
 

diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
@@ -12,7 +12,7 @@ If you’d like to learn more about Vue before diving in, we <a id="modal-player
 
 If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
 
-<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Free Vue.js Course">Watch a free video course on Vue Mastery</a></div>
+<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="sponsored noopener" title="Free Vue.js Course">Watch a free video course on Vue Mastery</a></div>
 
 ## Getting Started
 
@@ -403,4 +403,4 @@ Although Vue doesn't use custom elements internally, it has [great interoperabil
 
 We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
 
-<div id="video-modal" class="modal"><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></iframe></div><script src="https://player.vimeo.com/api/player.js"></script><p class="modal-text">Video by <a href="https://www.vuemastery.com" target="_blank" rel="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="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.</div>
+<div id="video-modal" class="modal"><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></iframe></div><script src="https://player.vimeo.com/api/player.js"></script><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>.</div>
diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md
@@ -76,7 +76,7 @@ Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly sca
 
 <p class="tip">The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through <a href="./">the guide</a> without any build tools before using the CLI.</p>
 
-<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/real-world-vue-js/vue-cli" target="_blank" rel="noopener" title="Vue CLI">Watch a video explanation on Vue Mastery</a></div>
+<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/real-world-vue-js/vue-cli" target="_blank" rel="sponsored noopener" title="Vue CLI">Watch a video explanation on Vue Mastery</a></div>
 
 ## Explanation of Different Builds
 

diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md
@@ -123,7 +123,7 @@ In the future, you can consult the [API reference](../api/#Instance-Properties)
 
 ## Instance Lifecycle Hooks
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Lifecycle Hooks Lesson">Watch a free lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/understanding-the-vuejs-lifecycle-hooks?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Lifecycle Hooks Lesson">Watch a free lesson on Vue School</a></div>
 
 Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
 

diff --git a/src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md
@@ -6,7 +6,7 @@ order: 601
 
 Now it's time to take a deep dive! One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system.
 
-<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system" target="_blank" rel="noopener" title="Vue Reactivity">Watch a video explanation on Vue Mastery</a></div>
+<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system" target="_blank" rel="sponsored noopener" title="Vue Reactivity">Watch a video explanation on Vue Mastery</a></div>
 
 ## How Changes Are Tracked
 

diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md
@@ -6,7 +6,7 @@ order: 401
 
 ## Introduction
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/introduction-to-single-file-components?friend=vuejs" target="_blank" rel="noopener" title="Free Vue.js Single File Components lesson">Watch a free video lesson on Vue School</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/introduction-to-single-file-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Single File Components lesson">Watch a free video lesson on Vue School</a></div>
 
 In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page.
 

diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md
@@ -8,7 +8,7 @@ order: 502
 
 Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif).
 
-<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/mastering-vuex/intro-to-vuex/" target="_blank" rel="noopener" title="Vuex Tutorial">Watch a video explanation on Vue Mastery</a></div>
+<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/mastering-vuex/intro-to-vuex/" target="_blank" rel="sponsored noopener" title="Vuex Tutorial">Watch a video explanation on Vue Mastery</a></div>
 
 ### Information for React Developers
 

diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -119,9 +119,33 @@
 </div>
 
 <div id="video-modal" class="modal">
-  <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%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-  </div><script src="https://player.vimeo.com/api/player.js"></script>
-  <p class="modal-text">Video by <a href="https://www.vuemastery.com" target="_blank" rel="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="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
+  <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%;"
+      frameborder="0"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen></iframe>
+  </div>
+  <script src="https://player.vimeo.com/api/player.js"></script>
+  <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>
 

diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs
@@ -14,8 +14,20 @@
     <li><h4>Video Courses</h4></li>
     <li>
       <ul>
-        <li><a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="noopener">Vue Mastery</a></li>
-        <li><a href="https://vueschool.io/?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=Navbar%20Dropdown" class="nav-link" target="_blank" rel="noopener">Vue School</a></li>
+        <li>
+          <a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="sponsored noopener">
+            Vue Mastery
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://vueschool.io/?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=Navbar%20Dropdown"
+            class="nav-link"
+            target="_blank" rel="sponsored noopener"
+          >
+            Vue School
+          </a>
+        </li>
       </ul>
     </li>
   </ul>

diff --git a/themes/vue/layout/partials/platinum_sponsors.ejs b/themes/vue/layout/partials/platinum_sponsors.ejs
@@ -3,7 +3,7 @@
     <span>Platinum Sponsors</span>
     <div>
     <%_ for (const sponsor of theme.platinum_sponsors) {_%>
-    <a href="<%- sponsor.url %>" target="_blank" rel="noopener" class="logo">
+    <a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="logo">
       <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>

diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
@@ -1,14 +1,14 @@
 <h3>Patreon Sponsors</h3>
 
 <%_ for (const sponsor of theme.platinum_sponsors) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="noopener" style="width: 160px;">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 160px;">
   <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 160px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
 <br>
 <%_ for (const sponsor of theme.gold_sponsors) {_%>
-<a href="<%- sponsor.url %>" target="_blank" rel="noopener" style="width: 120px;">
+<a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" style="width: 120px;">
   <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 120px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
@@ -20,13 +20,21 @@
   <h3>OpenCollective Sponsors</h3>
   <h4>Platinum</h4>
   <%_ for (let i = 0; i < 2; i++) {_%>
-  <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" rel="noopener" target="_blank">
+  <a
+    href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website"
+    rel="sponsored noopener"
+    target="_blank"
+  >
     <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg" alt="Vue.JS sponsor">
   </a>
   <%_ } _%>
   <h4>Gold</h4>
   <%_ for (let i = 0; i < 8; i++) {_%>
-  <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" rel="noopener" target="_blank">
+  <a
+    href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website"
+    rel="sponsored noopener"
+    target="_blank"
+  >
     <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg" alt="Vue.JS sponsor">
   </a>
   <%_ } _%>

diff --git a/themes/vue/layout/partials/sponsors_sidebar.ejs b/themes/vue/layout/partials/sponsors_sidebar.ejs
@@ -3,7 +3,7 @@
     <span>Special Sponsor</span>
     <div>
     <%_ for (const sponsor of theme.special_sponsors) {_%>
-    <a href="<%- sponsor.url %>" target="_blank" rel="noopener" class="logo">
+    <a href="<%- sponsor.url %>" target="_blank" rel="sponsored noopener" class="logo">
       <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>

diff --git a/themes/vue/layout/partners-page.ejs b/themes/vue/layout/partners-page.ejs
@@ -1,16 +1,20 @@
 <div id="partners">
   <p>
     Vue Partners are premium shops that provide first-class Vue consulting and development.
-    If your company is interested in being listed as a partner, please contact us at <a href="mailto:partners@vuejs.org">partners@vuejs.org.</a>
+    If your company is interested in being listed as a partner, please contact us at
+    <a href="mailto:partners@vuejs.org">partners@vuejs.org.</a>
   </p>
 
   <h2 id="active-partners">Active Partners</h2>
 
   <% for (let partner of page.partners_list) { %>
     <div class="partner">
       <div class="logo">
-        <a href="https://<%- partner.url_link %>" target="_blank">
-          <img src="<%- partner.logo.startsWith(`http`) ? partner.logo : url_for(`/images/${partner.logo}`) %>" alt="<%= partner.name %>">
+        <a href="https://<%- partner.url_link %>" target="_blank" rel="sponsored noopener">
+          <img
+            alt="<%= partner.name %>"
+            src="<%- partner.logo.startsWith(`http`) ? partner.logo : url_for(`/images/${partner.logo}`) %>"
+          >
         </a>
       </div>
       <div class="profile">
@@ -22,7 +26,9 @@
               <span class="sr-only">Link</span>
             </dt>
             <dd>
-              <a href="https://<%- partner.url_link %>" target=_blank><%- partner.url_text %></a>
+              <a href="https://<%- partner.url_link %>" target="_blank" rel="sponsored noopener">
+                <%- partner.url_text %>
+              </a>
             </dd>
 
           <dt>
@@ -52,7 +58,13 @@
             <ul>
               <% for (let proficiency of partner.proficiencies) { %>
                 <li>
-                  <a href="<%- proficiency.url || page.proficiencies_urls[proficiency] %>" target=_blank rel="noopener"> <%= proficiency.name || proficiency %></a>
+                  <a
+                    href="<%- proficiency.url || page.proficiencies_urls[proficiency] %>"
+                    target="_blank"
+                    rel="sponsored noopener"
+                  >
+                    <%= proficiency.name || proficiency %>
+                  </a>
                 </li>
               <% } %>
             </ul>
@@ -66,7 +78,7 @@
               </a>
             <% } %>
             <% for( let link of partner.social_links) { %>
-              <a class="<%= link.class %>" href="<%- link.url %>">
+              <a class="<%= link.class %>" href="<%- link.url %>" target="_blank" rel="noopener">
                 <i class="fa fa-<%= link.class %>"></i>
                 <span class="sr-only"><%= link.name %></span>
               </a>

diff --git a/themes/vue/source/css/_partners.styl b/themes/vue/source/css/_partners.styl
@@ -70,6 +70,8 @@
             color: #0077B5
           &.instagram
             color: #C13584
+          &.youtube
+            color: #f00
         i
           vertical-align: text-bottom
           font-size: 1.3em