Add Scrimba links and refactor VueSchoolLink to a more reusable component (#3240)

Add Scrimba component and links

Author: perborgen

.vitepress/theme/components/ScrimbaLink.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="scrimba">
+    <a
+      :href="href"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Watch a free interactive tutorial on 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: #2B2B2B; /* Scrimba's dark color */
+}
+.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> 

src/guide/components/v-model.md

@@ -1,5 +1,9 @@
 # Component 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">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 ## Basic Usage {#basic-usage}
 
 `v-model` can be used on a component to implement a two-way binding.

src/guide/essentials/component-basics.md

@@ -1,5 +1,9 @@
 # Components Basics {#components-basics}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Free Vue.js Components Basics Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organized into a tree of nested components:
 
 ![Component Tree](./images/components.png)

src/guide/essentials/template-syntax.md

@@ -1,5 +1,9 @@
 # Template Syntax {#template-syntax}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
 
 Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

src/guide/quick-start.md

@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 - If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on [StackBlitz](https://vite.new/vue).
 
+- To get a walkthrough of the recommended setup, watch this interactive [Scrimba](http://scrimba.com/links/vue-quickstart) tutorial that shows you how to run, edit, and deploy your first Vue app.
+
 ## Creating a Vue Application {#creating-a-vue-application}
 
 :::tip Prerequisites

src/guide/typescript/composition-api.md

@@ -1,5 +1,9 @@
 # TypeScript with Composition API {#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">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 > This page assumes you've already read the overview on [Using Vue with TypeScript](./overview).
 
 ## Typing Component Props {#typing-component-props}