Skip to content

Commit 6cb647c

Browse files
naokieyyx990803NataliaTepluhinaGreggErickPetru
authored
Guide > Introduction の翻訳を追従 (#272)
* docs: links to migration guide + update navbar ecosystem links * feat: added VueMastery modal to introduction * Added free course button on intro page * feat: created generic Codepen Snippet component (#548) * Update introduction.md (#796) * Update introduction.md I was working through the examples in Vue 3 and got the following error: ``` Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key ``` Adding the key removes this error. I'm new to Vue (coming from React) and don't know if I'm missing something. * Update src/guide/introduction.md Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com> * fix: added keys * Revert "fix: added keys" This reverts commit 5cfa447. * fix: added keys (#810) * docs: update video styles (#495) * config: add dev command * feature: standardize video styles and markup * docs: translate 'video lesson' component * docs: translate guide > introduction Co-authored-by: Evan You <yyx990803@gmail.com> Co-authored-by: NataliaTepluhina <tarya.se@gmail.com> Co-authored-by: Gregg Pollack <greggpollack+github@gmail.com> Co-authored-by: Erick Eduardo Petrucelli <erick.petrucelli@fatectq.edu.br> Co-authored-by: Kevin Cunningham <kevin@kevincunningham.co.uk> Co-authored-by: Ben Hong <ben@bencodezen.io>
1 parent 28d515f commit 6cb647c

36 files changed

+274
-526
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"vuepress": "^1.5.4"
1212
},
1313
"scripts": {
14+
"dev": "yarn serve",
1415
"serve": "vuepress dev src",
1516
"build": "vuepress build src",
1617
"test": "npm run lint",

‎src/.vuepress/components/VideoLesson.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script>
2+
export default {
3+
props: {
4+
href: {
5+
type: String,
6+
required: true
7+
},
8+
title: {
9+
type: String,
10+
default: ''
11+
}
12+
}
13+
}
14+
</script>
15+
16+
<template>
17+
<section class="video-lesson">
18+
<a :href="href" target="_blank" rel="sponsored noopener" :title="title">
19+
<slot></slot>
20+
</a>
21+
</section>
22+
</template>
23+
24+
<style lang="scss">
25+
.video-lesson {
26+
display: flex;
27+
align-items: center;
28+
background-color: #e7ecf3;
29+
padding: 1em 1.25em;
30+
border-radius: 2px;
31+
color: #486491;
32+
position: relative;
33+
margin: 24px 0;
34+
35+
a {
36+
color: #486491;
37+
position: relative;
38+
padding-left: 16px;
39+
}
40+
41+
&::before {
42+
content: '\f144';
43+
font-family: 'FontAwesome';
44+
font-size: 2em;
45+
display: inline-block;
46+
color: #73abfe;
47+
vertical-align: middle;
48+
}
49+
}
50+
</style>

‎src/.vuepress/components/common/codepen-snippet.vue

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<p
3+
class="codepen"
4+
:data-theme-id="theme"
5+
:data-preview="preview || null"
6+
:data-editable="editable || null"
7+
:data-height="height"
8+
:data-default-tab="tab"
9+
:data-user="user"
10+
:data-slug-hash="slug"
11+
:data-pen-title="title"
12+
:data-embed-version="version"
13+
:style="`height: ${height}px`">
14+
<span>See the Pen <a :href="href">{{ title }}</a>
15+
by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
16+
on <a href="https://codepen.io">CodePen</a>.</span>
17+
</p>
18+
</template>
19+
20+
<script>
21+
export default {
22+
props: {
23+
title: {
24+
type: String,
25+
default: null,
26+
required: true,
27+
},
28+
29+
slug: {
30+
type: String,
31+
default: null,
32+
required: true,
33+
},
34+
35+
tab: {
36+
type: String,
37+
default: 'result',
38+
},
39+
40+
team: {
41+
type: Boolean,
42+
default: true,
43+
},
44+
45+
user: {
46+
type: String,
47+
default: 'Vue',
48+
},
49+
50+
name: {
51+
type: String,
52+
default: null,
53+
},
54+
55+
height: {
56+
type: Number,
57+
default: 300,
58+
},
59+
60+
theme: {
61+
type: String,
62+
default: '39028',
63+
},
64+
65+
preview: {
66+
type: Boolean,
67+
default: true,
68+
},
69+
70+
editable: {
71+
type: Boolean,
72+
default: true,
73+
},
74+
75+
version: {
76+
type: String,
77+
default: null,
78+
}
79+
},
80+
mounted() {
81+
const codepenScript = document.createElement('script')
82+
codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
83+
codepenScript.async = true
84+
this.$el.appendChild(codepenScript)
85+
},
86+
computed: {
87+
href() {
88+
return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
89+
}
90+
},
91+
}
92+
</script>
93+
94+
<style lang="scss">
95+
.codepen {
96+
box-sizing: border-box;
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
100+
border: 2px solid;
101+
margin: 1em 0;
102+
padding: 1em;
103+
}
104+
</style>

‎src/.vuepress/components/common/vuemastery-video-modal.vue

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
<template>
22
<div class="overlay" v-show="isOpen">
33
<div ref="modal" class="modal" :class="{ open: isOpen }">
4-
<div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
4+
<div
5+
class="video-space"
6+
style="padding: 56.25% 0 0 0; position: relative;"
7+
>
58
<iframe
69
src="https://player.vimeo.com/video/247494684?dnt=1"
710
style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
811
frameborder="0"
912
webkitallowfullscreen
1013
mozallowfullscreen
1114
allowfullscreen
15+
allow="autoplay"
1216
ref="videoIframe"
1317
></iframe>
1418
</div>
@@ -20,14 +24,15 @@
2024
target="_blank"
2125
rel="sponsored noopener"
2226
title="Vue.js Courses on Vue Mastery"
23-
>Vue Mastery</a>.
24-
Watch Vue Mastery’s free
27+
>Vue Mastery</a
28+
>. Watch Vue Mastery’s free
2529
<a
2630
href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
2731
target="_blank"
2832
rel="sponsored noopener"
2933
title="Vue.js Courses on Vue Mastery"
30-
>Intro to Vue course</a>.
34+
>Intro to Vue course</a
35+
>.
3136
</p>
3237
</div>
3338
</div>
@@ -47,7 +52,7 @@ export default {
4752
}),
4853
4954
methods: {
50-
initVideoModal () {
55+
initVideoModal() {
5156
const modalButton = document.querySelector(this.triggerSelector)
5257
const player = new Vimeo.Player(this.$refs.videoIframe)
5358
@@ -59,7 +64,11 @@ export default {
5964
})
6065
6166
document.body.addEventListener('click', event => {
62-
if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
67+
if (
68+
this.isOpen &&
69+
event.target !== modalButton &&
70+
!this.$refs.modal.contains(event.target)
71+
) {
6372
this.isOpen = false
6473
document.body.classList.remove('stop-scroll')
6574
player.pause()
@@ -68,7 +77,7 @@ export default {
6877
}
6978
},
7079
71-
mounted () {
80+
mounted() {
7281
if (typeof window !== 'undefined') {
7382
this.initVideoModal()
7483
}
@@ -77,7 +86,7 @@ export default {
7786
</script>
7887

7988
<style lang="scss">
80-
@import "@theme/styles/_settings.scss";
89+
@import '@theme/styles/_settings.scss';
8190
8291
.modal {
8392
box-sizing: border-box;

‎src/.vuepress/styles/index.styl

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -125,31 +125,6 @@
125125
}
126126
}
127127

128-
.scrimba,
129-
.vueschool {
130-
background-color: #e7ecf3;
131-
padding: 1em 1.25em;
132-
border-radius: 2px;
133-
color: #486491;
134-
position: relative;
135-
margin: 24px 0;
136-
137-
a {
138-
color: #486491;
139-
position: relative;
140-
padding-left :16px;
141-
}
142-
143-
&::before {
144-
content: "\f144";
145-
font-family: 'FontAwesome';
146-
font-size: 2em;
147-
display: inline-block;
148-
color: #73abfe;
149-
vertical-align: middle;
150-
}
151-
}
152-
153128
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
154129
font-size: inherit;
155130
cursor: pointer!important;

‎src/cookbook/editable-svg-icons.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default {
143143

144144
We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser.
145145

146-
<p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
146+
<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
147147

148148
<p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
149149

‎src/examples/commits.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> この例は最新の Vue.js コミットデータを GitHub API から取得し、そしてそれらをリストとして表示します。あなたは master ブランチと dev ブランチ間を切り替えることができます。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
7-
Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />

‎src/examples/elastic-header.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
# 弾力のあるヘッダ
22

3-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
4-
<span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
5-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
6-
on <a href="https://codepen.io">CodePen</a>.</span>
7-
</p>
8-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
3+
<common-codepen-snippet title="Vue 3 Elastic Draggable Header Example" slug="ZEWGmar" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/grid-component.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> これは再利用可能なグリッドコンポーネントを作成して外部データでそれを利用した例です。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Elastic Draggable Header Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
7-
Vue 3 Elastic Draggable Header Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />

‎src/examples/markdown.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> すごくシンプルな Markdown エディタ。
44
5-
<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
6-
<span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
7-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Markdown Editor" slug="oNxXzyB" :height="474" tab="js,result" :team="false" user="immarina" name="Vue" :preview="false" :editable="false" />

‎src/examples/modal.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> コンポーネント、プロパティの伝達、コンテンツ挿入、トランジションの機能が使われています。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="BaKoeXe" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKoeXe">
7-
Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />

‎src/examples/select2.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> この例では、カスタムコンポーネント内部でラップすることによって、サードパーティの jQuery プラグイン (select2) を統合しています。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
7-
Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />

‎src/examples/svg.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> この例はカスタムコンポーネントの組み合わせ、算出プロパティ、双方向バインディング、そして SVG 対応を紹介します。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
7-
Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />

‎src/examples/todomvc.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,4 @@
88
さらに、 CodePen の制約によってハッシュナビゲーションは動作しません。
99
:::
1010

11-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
12-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
13-
Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
14-
on <a href="https://codepen.io">CodePen</a>.</span>
15-
</p>
16-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
11+
<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />

‎src/examples/tree-view.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,4 @@
22

33
> コンポーネントの再帰的な利用を紹介するシンプルなツリー表示実装の例。
44
5-
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
6-
<span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
7-
Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
8-
on <a href="https://codepen.io">CodePen</a>.</span>
9-
</p>
10-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
5+
<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />

‎src/guide/a11y-basics.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,7 @@ export default {
5454
</script>
5555
```
5656

57-
<p class="codepen" data-height="350" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="VwepxJa" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Skip to Main">
58-
<span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
59-
Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
60-
on <a href="https://codepen.io">CodePen</a>.</span>
61-
</p>
62-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
57+
<common-codepen-snippet title="Skip to Main" slug="VwepxJa" :height="350" tab="js,result" :team="false" user="mlama007" name="Maria" theme="light" :preview="false" :editable="false" />
6358

6459
[メインコンテンツへのスキップリンクについてのドキュメントを読む](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
6560

0 commit comments

Comments
 (0)