[Doc]: chore: add rel=sponsor to partner links #1851 (#1866)

oohira · potato4d · commit 30d74820e366 · 2019-10-13T03:56:19.000+09:00
* cherry-pick & translate vuejs/v2.vuejs.org@5741905
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
@@ -8,7 +8,7 @@ order: 6
 データバインディングに一般に求められることの 1 つは、要素のクラスリストとインラインスタイルを操作することです。それらはどちらも属性ですから、`v-bind` を使って扱うことができます。最終的な文字列を式で計算するだけです。しかしながら、文字列の連結に手を出すのは煩わしく、エラーのもとです。そのため、Vue は `v-bind` が `class` と `style` と一緒に使われるとき、特別な拡張機能を提供します。文字列だけではなく、式はオブジェクトまたは配列を返すことができます。
 
 ## HTML クラスのバインディング
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 ### オブジェクト構文
 
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
@@ -202,7 +202,7 @@ new Vue({
 
 ## 非同期コンポーネント
 
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバからロードしたい場合があるでしょう。Vue では、コンポーネント定義を非同期で解決するファクトリ関数としてコンポーネントを定義することができます。Vue は、コンポーネントをレンダリングする必要がある場合にのみファクトリ関数をトリガし、将来の再レンダリングのために結果をキャッシュします。例えば:
 
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
@@ -7,7 +7,7 @@ order: 101
 
 > このページは [コンポーネントの基本](components.html) を読まれていることが前提になっています。コンポーネントを扱った事のない場合はこちらのページを先に読んでください。
 
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 ## コンポーネント名
 
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
@@ -5,7 +5,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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 ## 基本例
 
diff --git a/src/v2/guide/custom-directive.md b/src/v2/guide/custom-directive.md
@@ -7,7 +7,7 @@ order: 302
 
 ## 基本
 
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 Vue.js 本体で出荷されたディレクティブの標準セットに加えて (`v-model` と `v-show`)、カスタムディレクティブ (custom directive) を登録することができます。Vue 2.0 では、コードの再利用と抽象化における基本の形はコンポーネントです。しかしながら、通常の要素で低レベル DOM にアクセスしなければならないケースがあるかもしれません。こういった場面では、カスタムディレクティブが役立つでしょう。ひとつの例として、以下のような input 要素へのフォーカスが挙げられます:
 
diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
@@ -13,7 +13,7 @@ Vue (発音は / v j u ː / 、 **view** と同様）はユーザーインター
 
 あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、[他のフレームワークとの比較](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">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">Vue Masteryで無料の動画コースを見る</a></div>
 
 ## はじめに
 
@@ -402,4 +402,4 @@ Vue は内部的にはカスタム要素を使っていませんが、カスタ
 
 Vue.js のコアの基本的な機能について簡単に紹介しましたが、このガイドの残りの部分では、基本的な機能だけでなく他の高度な機能についてもっと詳しく扱うので、全てに目を通すようにしてください！
 
-<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
@@ -77,7 +77,7 @@ $ npm install vue
 
 <p class="tip">CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、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">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">Vue Masteryで動画の説明を見る</a></div>
 
 ## さまざまなビルドについて
 
diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md
@@ -123,7 +123,7 @@ vm.$watch('a', function (newValue, oldValue) {
 
 ## インスタンスライフサイクルフック
 
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかの **ライフサイクルフック(lifecycle hooks)** と呼ばれる関数を実行します。
 
diff --git a/src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md
@@ -7,7 +7,7 @@ order: 601
 
 さらに深く見ていきましょう！Vue の最大の特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。これは状態管理を非常にシンプルかつ直感的にしますが、よくある問題を避けるためにその仕組みを理解することも重要です。このセクションでは、Vue のリアクティブシステムの低レベルの詳細の一部について掘り下げていきます。
 
-<div class="vue-mastery"><a href="https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system" target="_blank" rel="noopener" title="Vue Reactivity">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">Vue Masteryで動画の説明を見る</a></div>
 
 ## 変更の追跡方法
 
diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md
@@ -7,7 +7,7 @@ order: 401
 
 ## 前書き
 
-<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">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">Vue School で無料の動画レッスンを見る</a></div>
 
 多くの Vue プロジェクトでは、グローバルコンポーネントは、`new Vue({ el: '#container '})` の後に各ページの body においてコンテナ要素をターゲットにすることに続いて、`Vue.component` を使用して定義されています。
 
diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md
@@ -9,7 +9,7 @@ order: 502
 
 大規模なアプリケーションは、多くの状態が色々なコンポーネントに散らばったり、コンポーネント間の相互作用のために複雑になりがちです。この問題を解消するために、 Vue は Elm から触発された状態管理ライブラリの [vuex](https://github.com/vuejs/vuex) を提供します。[vue-devtools](https://github.com/vuejs/vue-devtools) とも連携し、特別なセットアップなしで[タイムトラベルデバッグ](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">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">Vue Masteryで動画の説明を見る</a></div>
 
 ### React 開発者への情報
 
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -121,9 +121,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>ビデオコース</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>プラチナスポンサー</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 スポンサー</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,15 +20,23 @@
   <h3>OpenCollective スポンサー</h3>
   <h4>プラチナ</h4>
   <%_ for (let i = 0; i < 2; i++) {_%>
-    <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" rel="noopener" target="_blank">
-      <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg" alt="Vue.js スポンサー">
-    </a>
+  <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 スポンサー">
+  </a>
   <%_ } _%>
   <h4>ゴールド</h4>
   <%_ for (let i = 0; i < 8; i++) {_%>
-    <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" rel="noopener" target="_blank">
-      <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg" alt="Vue.js スポンサー">
-    </a>
+  <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 スポンサー">
+  </a>
   <%_ } _%>
 </div>
 
diff --git a/themes/vue/layout/partials/sponsors_sidebar.ejs b/themes/vue/layout/partials/sponsors_sidebar.ejs
@@ -3,7 +3,7 @@
     <span>スペシャルスポンサー</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
diff --git a/themes/vue/source/css/_partners.styl b/themes/vue/source/css/_partners.styl
