Add Scrimba links and refactor VueSchoolLink to a more reusable component

.vitepress/theme/components/ScrimbaLink.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="scrimba">
+    <a
+      :href="href"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Scrimba で無料のインタラクティブなチュートリアルを見る</slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    href: { type: String, required: true },
+    title: { type: String, required: true }
+  }
+}
+</script>
+<style scoped>
+.scrimba {
+  margin: 28px 0;
+  background-color: var(--vt-c-bg-soft);
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+}
+.scrimba a {
+  color: var(--c-text);
+  position: relative;
+  padding-left: 36px;
+}
+.scrimba a:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 30px;
+  height: 30px;
+  top: calc(50% - 15px);
+  left: -4px;
+  border-radius: 50%;
+  background-color: #73abfe;
+ }
+ .scrimba a:after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 5px);
+  left: 8px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #fff;
+}
+</style>

.vitepress/theme/index.ts

@@ -10,6 +10,7 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
+import ScrimbaLink from './components/ScrimbaLink.vue'
 import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
@@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, {
     app.provide('prefer-sfc', preferSFC)
     app.provide('filter-headers', filterHeadersByPreference)
     app.component('VueSchoolLink', VueSchoolLink)
+    app.component('ScrimbaLink', ScrimbaLink)
     // app.component('TextAd', TextAd)
   }
 })

src/guide/components/v-model.md

@@ -1,5 +1,9 @@
 # コンポーネントの v-model {#component-v-model}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Free Vue.js Component v-model Lesson" type="scrimba">
+  Scrimba でインタラクティブなビデオレッスンを見る
+</ScrimbaLink>
+
 ## 基本的な使い方 {#basic-usage}
 
 コンポーネント上で `v-model` を使用すると双方向バインディングを実装できます。

src/guide/essentials/component-basics.md

@@ -1,5 +1,9 @@
 # コンポーネントの基礎 {#components-basics}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Free Vue.js Components Basics Lesson" type="scrimba">
+  Scrimba でインタラクティブなビデオレッスンを見る
+</ScrimbaLink>
+
 コンポーネントによって UI を独立した再利用可能なピースに分割し、それぞれのピースを切り離して考えることができるようになります。アプリケーションはネストされたコンポーネントのツリーによって構成されているのが一般的です:
 
 ![コンポーネントツリー](./images/components.png)

src/guide/essentials/template-syntax.md

@@ -1,5 +1,9 @@
 # テンプレート構文 {#template-syntax}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
+  Scrimba でインタラクティブなビデオレッスンを見る
+</ScrimbaLink>
+
 Vue では、HTML ベースのテンプレート構文を使用します。テンプレート構文では、基盤とするコンポーネントのインスタンスのデータと、レンダリングされる DOM を宣言的にバインドすることが可能です。すべての Vue テンプレートは、仕様に準拠しているブラウザーや HTML パーサーでパースできる、構文的に正規の HTML です。
 
 内部では、Vue はテンプレートをコンパイルし、高度に最適化された JavaScript のコードにします。リアクティビティー機構と組み合わせ、Vue はアプリの状態が変化したとき、再レンダリングを必要とする最小限のコンポーネントをインテリジェントに見つけ出すことができます。そして、最小限の DOM 操作を適用します。

src/guide/quick-start.md

@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 - Node.js とビルドツールの概念に既に慣れている場合は、[StackBlitz](https://vite.new/vue) を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。
 
+- 推奨されるセットアップのチュートリアルについては、はじめての Vue アプリケーションの実行、編集、デプロイ方法を紹介するインタラクティブな [Scrimba](http://scrimba.com/links/vue-quickstart) チュートリアルをご覧ください。
+
 ## Vue アプリケーションの作成 {#creating-a-vue-application}
 
 :::tip 前提条件

src/guide/typescript/composition-api.md

@@ -1,5 +1,9 @@
 # Composition API で TypeScript を使用する {#typescript-with-composition-api}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-ts-composition-api" title="Free Vue.js TypeScript with Composition API Lesson" type="scrimba">
+  Scrimba でインタラクティブなビデオレッスンを見る
+</ScrimbaLink>
+
 > このページは [TypeScript で Vue を使用する](./overview) ページの内容をすでに読んでいることを前提にしています。
 
 ## コンポーネント props の型付け {#typing-component-props}