Skip to content

Commit ee56629

Browse files
jay-esjay-es
authored
Add Scrimba links and refactor VueSchoolLink to a more reusable component (#2582)
* Add Scrimba links and refactor VueSchoolLink to a more reusable component * Register ScrimbaLink component and change color on play button
1 parent c423f4e commit ee56629

File tree

7 files changed

+79
-0
lines changed

7 files changed

+79
-0
lines changed

‎.vitepress/theme/components/ScrimbaLink.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="scrimba">
3+
<a
4+
:href="href"
5+
target="_blank"
6+
rel="sponsored noopener"
7+
:title="title"
8+
>
9+
<slot>Scrimba で無料のインタラクティブなチュートリアルを見る</slot>
10+
</a>
11+
</div>
12+
</template>
13+
<script>
14+
export default {
15+
props: {
16+
href: { type: String, required: true },
17+
title: { type: String, required: true }
18+
}
19+
}
20+
</script>
21+
<style scoped>
22+
.scrimba {
23+
margin: 28px 0;
24+
background-color: var(--vt-c-bg-soft);
25+
padding: 1em 1.25em;
26+
border-radius: 2px;
27+
position: relative;
28+
display: flex;
29+
border-radius: 8px;
30+
}
31+
.scrimba a {
32+
color: var(--c-text);
33+
position: relative;
34+
padding-left: 36px;
35+
}
36+
.scrimba a:before {
37+
content: '';
38+
position: absolute;
39+
display: block;
40+
width: 30px;
41+
height: 30px;
42+
top: calc(50% - 15px);
43+
left: -4px;
44+
border-radius: 50%;
45+
background-color: #73abfe;
46+
}
47+
.scrimba a:after {
48+
content: '';
49+
position: absolute;
50+
display: block;
51+
width: 0;
52+
height: 0;
53+
top: calc(50% - 5px);
54+
left: 8px;
55+
border-top: 5px solid transparent;
56+
border-bottom: 5px solid transparent;
57+
border-left: 8px solid #fff;
58+
}
59+
</style>

‎.vitepress/theme/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from './components/preferences'
1111
import SponsorsAside from './components/SponsorsAside.vue'
1212
import VueSchoolLink from './components/VueSchoolLink.vue'
13+
import ScrimbaLink from './components/ScrimbaLink.vue'
1314
import Banner from './components/Banner.vue'
1415
// import TextAd from './components/TextAd.vue'
1516

@@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, {
2829
app.provide('prefer-sfc', preferSFC)
2930
app.provide('filter-headers', filterHeadersByPreference)
3031
app.component('VueSchoolLink', VueSchoolLink)
32+
app.component('ScrimbaLink', ScrimbaLink)
3133
// app.component('TextAd', TextAd)
3234
}
3335
})

‎src/guide/components/v-model.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# コンポーネントの v-model {#component-v-model}
22

3+
<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Free Vue.js Component v-model Lesson" type="scrimba">
4+
Scrimba でインタラクティブなビデオレッスンを見る
5+
</ScrimbaLink>
6+
37
## 基本的な使い方 {#basic-usage}
48

59
コンポーネント上で `v-model` を使用すると双方向バインディングを実装できます。

‎src/guide/essentials/component-basics.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# コンポーネントの基礎 {#components-basics}
22

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

59
![コンポーネントツリー](./images/components.png)

‎src/guide/essentials/template-syntax.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# テンプレート構文 {#template-syntax}
22

3+
<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
4+
Scrimba でインタラクティブなビデオレッスンを見る
5+
</ScrimbaLink>
6+
37
Vue では、HTML ベースのテンプレート構文を使用します。テンプレート構文では、基盤とするコンポーネントのインスタンスのデータと、レンダリングされる DOM を宣言的にバインドすることが可能です。すべての Vue テンプレートは、仕様に準拠しているブラウザーや HTML パーサーでパースできる、構文的に正規の HTML です。
48

59
内部では、Vue はテンプレートをコンパイルし、高度に最適化された JavaScript のコードにします。リアクティビティー機構と組み合わせ、Vue はアプリの状態が変化したとき、再レンダリングを必要とする最小限のコンポーネントをインテリジェントに見つけ出すことができます。そして、最小限の DOM 操作を適用します。

‎src/guide/quick-start.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
1616

1717
- Node.js とビルドツールの概念に既に慣れている場合は、[StackBlitz](https://vite.new/vue) を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。
1818

19+
- 推奨されるセットアップのチュートリアルについては、はじめての Vue アプリケーションの実行、編集、デプロイ方法を紹介するインタラクティブな [Scrimba](http://scrimba.com/links/vue-quickstart) チュートリアルをご覧ください。
20+
1921
## Vue アプリケーションの作成 {#creating-a-vue-application}
2022

2123
:::tip 前提条件

‎src/guide/typescript/composition-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Composition API で TypeScript を使用する {#typescript-with-composition-api}
22

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

0 commit comments

Comments
 (0)