Adding pathways to free Video content

src/v2/guide/index.md

@@ -13,6 +13,8 @@ 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>
+
 ## はじめに
 
 <p class="tip">公式ガイドは、HTML、CSS そして JavaScript の中レベルのフロントエンドの知識を前提にしています。フロントエンドの開発が初めてであるならば、最初のステップとして、フレームワークに直接入門するのは良いアイデアではないかもしれません。基礎を学んで戻ってきましょう！他のフレームワークでの以前の経験は役に立ちますが、必須ではありません。</p>
@@ -394,4 +396,4 @@ Vue のコンポーネントが [Web Components Spec](https://www.w3.org/wiki/We
 
 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" 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></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" 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>

src/v2/guide/installation.md

@@ -63,6 +63,8 @@ $ 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>
+
 ## さまざまなビルドについて
 
 [NPM パッケージの `dist/` ディレクトリ](https://cdn.jsdelivr.net/npm/vue/dist/) では Vue.js の多くのさまざまなビルドが見つかります。それらの違いの概要は以下の通りです:

src/v2/guide/reactivity.md

@@ -7,6 +7,8 @@ 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>
+
 ## 変更の追跡方法
 
 プレーンな JavaScript オブジェクトを `data` オプションとして Vue インスタンスに渡すとき、Vue はその全てのプロパティを渡り歩いて、それらを [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) を使用して getter/setter に変換します。これは ES5 だけの、シム (shim) ができない機能で、Vue が IE8 以下をサポートしないのはこのためです。

src/v2/guide/state-management.md

@@ -9,6 +9,8 @@ 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>
+
 ### React 開発者への情報
 
 もしあなたが React のエコシステムから来たのなら、最も人気のある Flux 実装の [redux](https://github.com/reactjs/redux) と vuex がどう比較されるか気になっていることでしょう。Redux は実際に view レイヤの知識を持たないので、[シンプルなバインディング](https://yarnpkg.com/en/packages?q=redux%20vue&p=1) を通して簡単に Vue とあわせて利用することができます。Vuex は、 自らが Vue のアプリケーション内にいることを**知っている**、という点で異なります。これにより Vue といっそう良く連携することができ、より直感的な API を提供したり、開発体験を向上させることができます。

themes/vue/layout/index.ejs

@@ -120,7 +120,10 @@
 </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" 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>
+  <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" 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>.
+  </p>
 </div>
 
 <script>

themes/vue/source/css/_modal.styl

@@ -2,7 +2,7 @@
   box-sizing: border-box
   display: none
   position: fixed
-  width: 80%
+  width: 75%
   height: auto
   padding: .5em
   background-color: #f9f9f9
@@ -13,6 +13,12 @@
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
+.modal-text
+  margin-bottom 0.5em
+  text-align center
+  > a
+    color $green
+    font-weight 600
 .overlay
   position: fixed
   top: 0

themes/vue/source/css/_vue-mastery.styl

@@ -0,0 +1,32 @@
+.vue-mastery
+  background-color #e7ecf3
+  padding 1em 1.25em
+  border-radius 2px
+  color #486491
+  position relative
+  margin-top 1em
+  a
+    color #486491 !important
+    position relative
+    padding-left 36px
+    &:before
+      content ''
+      position absolute
+      display block
+      width 30px
+      height 30px
+      top -5px
+      left -4px
+      border-radius 50%
+      background-color #73abfe
+    &:after
+      content ''
+      position absolute
+      display block
+      width 0
+      height 0
+      top 5px
+      left 8px
+      border-top 5px solid transparent
+      border-bottom 5px solid transparent
+      border-left 8px solid #fff

themes/vue/source/css/page.styl

@@ -13,6 +13,7 @@
 @import "_style-guide"
 @import "_modal"
 @import "_scrimba"
+@import "_vue-mastery"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)