docs: update video styles (#495)

* config: add dev command

* feature: standardize video styles and markup

Author: bencodezen

package.json

@@ -11,6 +11,7 @@
     "vuepress": "^1.5.4"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src",
     "test": "npm run lint",

src/.vuepress/components/VideoLesson.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="video-lesson">
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot></slot>
+    </a>
+  </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+  display: flex;
+  align-items: center;
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left: 16px;
+  }
+
+  &::before {
+    content: '\f144';
+    font-family: 'FontAwesome';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}
+</style>

src/.vuepress/styles/index.styl

@@ -125,31 +125,6 @@
   }
 }
 
-.scrimba,
-.vueschool {
-  background-color: #e7ecf3;
-  padding: 1em 1.25em;
-  border-radius: 2px;
-  color: #486491;
-  position: relative;
-  margin: 24px 0;
-
-  a {
-    color: #486491;
-    position: relative;
-    padding-left :16px;
-  }
-
-  &::before {
-    content: "\f144";
-    font-family: 'FontAwesome';
-    font-size: 2em;
-    display: inline-block;
-    color: #73abfe;
-    vertical-align: middle;
-  }
-}
-
 .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
   font-size: inherit;
   cursor: pointer!important;

src/guide/component-custom-events.md

@@ -23,6 +23,8 @@ this.$emit('myEvent')
 
 ## カスタムイベントの定義
 
+<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video about Defining Custom Events on Vue School</VideoLesson>
+
 発行されたイベントは、 `emits` オプションを介して、コンポーネントで定義することが出来ます。
 
 ```js

src/guide/composition-api-introduction.md

@@ -6,6 +6,8 @@
 ドキュメントでここまで到達しているならば、[Vue の基本](introduction.md)と[コンポーネントの作成](component-basics.md)の両方にすでに精通しているはずです。
 :::
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api" title="Learn how Composition API works in depth with Vue Mastery">Watch a free video about the Composition API on Vue Mastery</VideoLesson>
+
 Vue コンポーネントを作成するとその機能と結合されたインターフェースの繰り返し可能な部分を再利用可能なコードとして抽出することができます。これだけでも保守性と柔軟性の点でアプリケーションをかなり良くすることができます。しかし、蓄積された経験から、特にアプリケーションが非常に大規模な場合は、これだけでは不十分であることがわかっています。数百のコンポーネントがある場合を想像してみてください。そのような大規模なアプリケーションを扱う場合は、コードを共通化して再利用することが非常に重要になります。
 
 このアプリには、特定のユーザーのリポジトリのリストを表示するビューがあると想像してみましょう。さらに、検索と絞り込みの機能を実装したいとします。このビューを処理するコンポーネントは次のようになります:
@@ -66,6 +68,8 @@ export default {
 
 ### `setup` コンポーネントオプション
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Learn how setup works with Vue Mastery">Watch a free video on setup on Vue Mastery</VideoLesson>
+
 新しい `setup` コンポーネントオプションは、コンポーネントが作成される前に `props` が解決されると実行され、コンポジション API のエントリポイントとして機能します。
 
 ::: warning

src/guide/composition-api-lifecycle-hooks.md

@@ -2,6 +2,8 @@
 
 > このページは、すでに [コンポジション API の基本](composition-api-introduction.html) と [リアクティブの基礎](reactivity-fundamentals.html) を読んでいることを前提としています。 コンポジション API を初めて使用する場合は、最初にそちらをお読みください。
 
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks" title="Learn about how Lifecycle Hooks work with Vue Mastery">Watch a free video about Lifecycle Hooks on Vue Mastery</VideoLesson>
+
 ライフサイクルフックの前に "on" をつけることで、コンポーネントのライフサイクルフックにアクセスすることができます。
 
 [setup()](composition-api-setup.html) 内で、ライフサイクルフックを呼び出す方法は、次の表の通りです:

src/guide/reactivity.md

@@ -2,7 +2,7 @@
 
 さらに深く見ていきましょう！Vue の最大の特徴の 1 つは、控えめなリアクティブシステムです。モデルはプロキシされた JavaScript オブジェクトです。それらを変更するとビューが更新されます。これは状態管理を非常にシンプルかつ直感的にしますが、よくある問題を避けるためにその仕組みを理解することも重要です。このセクションでは、Vue のリアクティブシステムに関する低レベルの詳細のいくつかを掘り下げていきます。
 
-<VideoLesson href="https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity" title="Learn how how reactivity works in depth with Vue Mastery">Vue Mastery のリアクティブの探求に関する無料ビデオを視聴する</VideoLesson>
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity" title="Vue Mastery のリアクティブの探求に関する無料ビデオを視聴する">Vue Mastery のリアクティブの探求に関する無料ビデオを視聴する</VideoLesson>
 
 # リアクティブとは何か？