Skip to content

Commit 5b6d3ac

Browse files
naokienaokie
committed
Merge branch 'lang-ja' into api/sfc-script-setup
* lang-ja: update component-slots.md (#1342) update component-provide-inject.md (#1343) Update sfc-script-setup.md (#1345) fix: fixed a broken link docs(installation): link to cli.vuejs.org and vitejs.dev (#1340) update component-props.md (#1336) Fix Black Friday banner close button (#1333) Add Vue School Black Friday 21 banners (#1330) fix: some markdown style
2 parents 8ec48dd + f383856 commit 5b6d3ac

21 files changed

+520
-17
lines changed

‎src/.vuepress/config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ module.exports = {
274274
'link',
275275
{
276276
href:
277-
'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
277+
'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Archivo:400,600|Open+Sans:400,600;display=swap',
278278
rel: 'stylesheet'
279279
}
280280
],
@@ -510,7 +510,7 @@ module.exports = {
510510
custom: 'CKYD62QM',
511511
placement: 'vuejsorg'
512512
},
513-
topBanner: false
513+
topBanner: true
514514
},
515515
plugins: [
516516
[

‎src/.vuepress/public/images/vueschool/tech-coin-js.png

4.44 KB
Loading

‎src/.vuepress/public/images/vueschool/tech-coin-nuxt.png

5.29 KB
Loading

‎src/.vuepress/public/images/vueschool/tech-coin-ts.png

3.4 KB
Loading

‎src/.vuepress/public/images/vueschool/tech-coin-vue.png

4.28 KB
Loading

‎src/.vuepress/public/images/vueschool/tech-coin-vuex.png

3.63 KB
Loading

‎src/.vuepress/public/images/vueschool/vueschool_blackfriday_background_tablet.svg

Lines changed: 200 additions & 0 deletions
Loading

‎src/.vuepress/public/images/vueschool/vueschool_blackfriday_logo.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/.vuepress/public/images/vueschool/vueschool_close.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/.vuepress/theme/components/BannerCoins.vue

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<template>
2+
<div
3+
class="vs-blackfriday-coins">
4+
<img
5+
v-for="coin in coins"
6+
:key="coin.id"
7+
:alt="coin.id"
8+
:src="`/images/vueschool/tech-coin-${coin.id}.png`"
9+
:class="[coin.id, coin.inverse ? inverseDirection : direction]"
10+
:style="coin.style"
11+
class="vs-blackfriday-coin">
12+
</div>
13+
</template>
14+
15+
<script>
16+
const coins = [
17+
{ id: 'js', inverse: true },
18+
{ id: 'ts' },
19+
{ id: 'vue', inverse: true },
20+
{ id: 'vuex', inverse: true },
21+
{ id: 'nuxt' }
22+
]
23+
24+
export default {
25+
data () {
26+
return {
27+
coins,
28+
xPosition: 0,
29+
direction: 'left',
30+
inverseDirection: 'right',
31+
isAnimated: false
32+
}
33+
},
34+
mounted () {
35+
if (window.innerWidth < 1024) return
36+
this.isAnimated = true
37+
this.animationTarget = document.getElementById('vs')
38+
this.animationTarget.addEventListener('mousemove', this.animate)
39+
},
40+
beforeDestroy () {
41+
if (!this.isAnimated) return
42+
this.animationTarget.removeEventListener('mousemove', this.animate)
43+
},
44+
methods: {
45+
animate (e) {
46+
this.direction = e.pageX > this.xPosition ? 'right' : 'left'
47+
this.inverseDirection = this.direction === 'left' ? 'right' : 'left'
48+
this.xPosition = e.pageX
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style>
55+
.vs-blackfriday-coins {
56+
overflow: hidden;
57+
position: absolute;
58+
bottom: 0;
59+
right: 0;
60+
top: 0;
61+
left: 0;
62+
z-index: -1;
63+
}
64+
65+
.vs-blackfriday-coin {
66+
display: none;
67+
}
68+
69+
@media (min-width: 768px) {
70+
.vs-blackfriday-coins {
71+
background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet.svg);
72+
background-position: center;
73+
background-size: cover;
74+
}
75+
}
76+
77+
@media (min-width: 1024px) {
78+
.vs-blackfriday-coins {
79+
background: transparent;
80+
}
81+
82+
#vs:hover .vs-blackfriday-coin.left {
83+
transform: translateX(-600px);
84+
transition: transform 30s linear;
85+
}
86+
87+
#vs:hover .vs-blackfriday-coin.right {
88+
transform: translateX(600px);
89+
transition: transform 30s linear;
90+
}
91+
92+
.vs-blackfriday-coin {
93+
display: inline-block;
94+
position: absolute;
95+
transition: transform 1000ms linear;
96+
transform: translateX(0);
97+
}
98+
99+
.vs-blackfriday-coin.js {
100+
width: 43px;
101+
top: 32px;
102+
left: calc(50% - 341px);
103+
}
104+
105+
.vs-blackfriday-coin.ts {
106+
top: 0;
107+
left: 0;
108+
width: 54px;
109+
left: calc(50% + 457px);
110+
}
111+
112+
.vs-blackfriday-coin.vue {
113+
top: 18px;
114+
width: 60px;
115+
left: calc(50% + 586px);
116+
}
117+
118+
.vs-blackfriday-coin.vuex {
119+
top: 23px;
120+
left: 0;
121+
width: 56px;
122+
left: calc(50% - 620px);
123+
}
124+
125+
.vs-blackfriday-coin.nuxt {
126+
top: 10px;
127+
width: 48px;
128+
left: calc(50% - 474px);
129+
}
130+
}
131+
</style>

‎src/.vuepress/theme/components/BannerTop.vue

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/blackfriday?friend=vuejs" target="_blank" rel="noreferrer">
3+
<BannerCoins />
4+
<div class="vs-core">
5+
<div class="vs-logo">
6+
<img src="/images/vueschool/vueschool_blackfriday_logo.svg">
7+
</div>
8+
<div class="vs-slogan">
9+
<div class="vs-slogan-subtitle">
10+
Access to all Vue Courses at Vue School
11+
</div>
12+
<div class="vs-slogan-title">
13+
Black Friday <strong>40% OFF</strong>
14+
</div>
15+
</div>
16+
<div class="vs-button">
17+
Get Discount
18+
</div>
19+
</div>
20+
<div id="vs-close" class="vs-close" @click.stop.prevent="$emit('close')">
21+
<img src="/images/vueschool/vueschool_close.svg" alt="Close">
22+
</div>
23+
</a>
24+
</template>
25+
26+
<script>
27+
import BannerCoins from './BannerCoins.vue'
28+
29+
export default {
30+
components: {
31+
BannerCoins
32+
}
33+
}
34+
</script>
35+
36+
<style lang="stylus">
37+
@require '../styles/config'
38+
$topBannerHeight ?= 5rem
39+
$topBannerHeightMobile ?= 5rem
40+
41+
// Banner
42+
#vs
43+
align-items: center
44+
background-color: #000c19
45+
box-sizing: border-box
46+
color: #fff
47+
display: none
48+
font-family 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif
49+
justify-content: center
50+
position: fixed
51+
padding: 0 10px
52+
left: 0
53+
right: 0
54+
top: 0
55+
z-index: 100
56+
line-height: 1
57+
height: $topBannerHeightMobile
58+
@media (min-width: 680px)
59+
height: $topBannerHeight
60+
justify-content: center
61+
62+
&:hover
63+
.vs-core
64+
.vs-button
65+
background: linear-gradient(261deg, #e61463 100%, #db5248 3%)
66+
67+
.vs-core
68+
display: flex
69+
align-items: center
70+
71+
.vs-slogan
72+
font-family: Archivo
73+
color: #FFF
74+
margin-left: 8px
75+
@media (min-width: 680px)
76+
margin-left: 24px
77+
.vs-slogan-subtitle
78+
font-size: 12px
79+
@media (min-width: 680px)
80+
font-size: 14px
81+
.vs-slogan-title
82+
margin-top: 6px
83+
font-size: 16px
84+
font-weight: 600
85+
@media (min-width: 680px)
86+
font-size: 18px
87+
strong
88+
color: #ffae29
89+
font-weight: 600
90+
91+
.vs-button
92+
color: #FFF
93+
padding: 7px 10px
94+
border-radius: 4px
95+
background: linear-gradient(to left, #e61b60, #dd4a4c)
96+
font-weight: 600
97+
white-space: nowrap
98+
margin-right: 30px
99+
margin-left: 1px
100+
@media (min-width: 680px)
101+
margin-right: 0
102+
padding: 8px 24px
103+
margin-left: 32px
104+
@media (min-width: 680px)
105+
margin-left: 69px
106+
107+
.vs-close
108+
right: 6px
109+
position: absolute
110+
@media (min-width: 680px)
111+
padding: 10px
112+
right: 20px
113+
&:hover
114+
color: #56D8FF
115+
116+
/************************************/
117+
118+
// Show banner only if the container has class "has-top-banner"
119+
.theme-container.has-top-banner
120+
#vs
121+
display: flex
122+
123+
// Add margin top to body, navbar and sidebar
124+
.theme-container.has-top-banner
125+
margin-top: $topBannerHeightMobile
126+
.navbar
127+
margin-top: $topBannerHeightMobile
128+
.sidebar
129+
margin-top: $topBannerHeightMobile
130+
@media (min-width: 680px)
131+
.theme-container.has-top-banner
132+
margin-top: $topBannerHeight
133+
.navbar
134+
margin-top: $topBannerHeight
135+
.sidebar
136+
margin-top: $topBannerHeight
137+
138+
// Adjust titles margin and padding for anchor links
139+
.theme-container.has-top-banner
140+
{$contentClass}:not(.custom) > h1,
141+
{$contentClass}:not(.custom) > h2,
142+
{$contentClass}:not(.custom) > h3
143+
margin-top (0.5rem - $navbarHeight - $topBannerHeightMobile)
144+
padding-top ($navbarHeight + 1rem + $topBannerHeightMobile)
145+
@media (min-width: 680px)
146+
margin-top (0.5rem - $navbarHeight - $topBannerHeight)
147+
padding-top ($navbarHeight + 1rem + $topBannerHeight)
148+
</style>

‎src/.vuepress/theme/layouts/Layout.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,16 @@ export default {
125125
this.$router.afterEach(() => {
126126
this.isSidebarOpen = false
127127
})
128+
129+
this.showTopBanner = !localStorage.getItem('VS_BF21_BANNER_CLOSED')
128130
},
129131
130132
methods: {
133+
closeBannerTop () {
134+
this.showTopBanner = false
135+
localStorage.setItem('VS_BF21_BANNER_CLOSED', 1)
136+
},
137+
131138
toggleSidebar(to) {
132139
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
133140
this.$emit('toggle-sidebar', this.isSidebarOpen)

‎src/api/sfc-script-setup.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,6 @@ const vMyDirective = {
149149
<h1 v-my-directive>This is a Heading</h1>
150150
</template>
151151
```
152-
153152
```html
154153
<script setup>
155154
// インポートも可能で、必要な命名スキーマに合わせてリネームすることができます
@@ -244,6 +243,10 @@ export default {
244243
</script>
245244
```
246245

246+
:::warning
247+
`render` function is not supported in this scenario. Please use one normal `<script>` with `setup` option instead.
248+
:::
249+
247250
## トップレベルの `await`
248251

249252
Top-level `await` can be used inside `<script setup>`. The resulting code will be compiled as `async setup()`:

‎src/community/join.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
### 行動規範
1010

11-
私達の[行動規範は](/coc)は、私達と参加する技術コミュニティ全体を豊かにするためのガイドです。
11+
私達の[行動規範](/coc)は、私達と参加する技術コミュニティ全体を豊かにするためのガイドです。
1212

1313
### サポートを得る
1414

‎src/guide/component-attrs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。
44
5-
プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#カスタムイベントの定義) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する `class` 、`style` 、`id` などの属性があります。これらの属性には `$attrs` プロパティでアクセスできます。
5+
プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props.html) や [emits](component-custom-events.html#カスタムイベントの定義) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する `class` 、`style` 、`id` などの属性があります。これらの属性には `$attrs` プロパティでアクセスできます。
66

77
## 属性の継承
88

‎src/guide/component-provide-inject.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ app.component('todo-list', {
6767
})
6868
```
6969

70-
コンポーネントのインスタンスプロパティにアクセスするためには、`provide` をオブジェクトを返す関数へ変換する必要があります
70+
コンポーネントのインスタンスプロパティにアクセスするためには、`provide` をオブジェクトを返す関数へ変換する必要があります:
7171

7272
```js
7373
app.component('todo-list', {

‎src/guide/component-slots.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ Vue には [Web Components spec draft](https://github.com/w3c/webcomponents/blob
9292
Clicking here will {{ action }} an item
9393
<!--
9494
`action` は undefined になります。なぜなら、このコンテンツは
95-
<todo-button> コンポーネント _の中で_ 定義されるのではなく、
96-
<todo-button> コンポーネント _に_ 渡されるからです
95+
<todo-button> コンポーネントの中で定義されるのではなく、
96+
<todo-button> コンポーネントに渡されるからです
9797
-->
9898
</todo-button>
9999
```

‎src/guide/contributing/doc-style-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## アラート
66

7-
VuePress は、アラートボックスを作成するためのカスタムコンテナプラグインを提供します。 4 つのタイプがあります:
7+
VuePress は、アラートボックスを作成するためのカスタムコンテナプラグインを提供します。4 つのタイプがあります:
88

99
- **Info**: 中立的な情報を提供する
1010
- **Tip**: ポジティブで奨励する情報を提供する

0 commit comments

Comments
 (0)