Skip to content

Commit f2ea63f

Browse files
committed
Fixed VuePress build error
Added a <ClientOnly> component around the code blocks couse they're not SSR compatible.
1 parent a38f501 commit f2ea63f

File tree

1 file changed

+49
-45
lines changed

1 file changed

+49
-45
lines changed

docs/tutorials/getting-started.md

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,54 +12,58 @@
1212

1313
- Create your animations. What about a bouncy circle?
1414

15-
<ExampleCircle>
16-
```js
17-
var circle = new mojs.Shape({
18-
parent: '#circle-anim',
19-
shape: 'circle',
20-
fill: {'#F64040': '#FC46AD'},
21-
radius: {20: 80},
22-
duration: 2000,
23-
isYoyo: true,
24-
easing: 'elastic.inout',
25-
repeat: 999,
26-
})
27-
.play();
28-
```
29-
</ExampleCircle>
15+
<ClientOnly>
16+
<ExampleCircle>
17+
```js
18+
var circle = new mojs.Shape({
19+
parent: '#circle-anim',
20+
shape: 'circle',
21+
fill: {'#F64040': '#FC46AD'},
22+
radius: {20: 80},
23+
duration: 2000,
24+
isYoyo: true,
25+
easing: 'elastic.inout',
26+
repeat: 999,
27+
})
28+
.play();
29+
```
30+
</ExampleCircle>
31+
</ClientOnly>
3032

3133
Or maybe a loading animation?
3234

33-
<ExampleSpinner height="200px" id="spinner">
34-
```js
35-
var loader = new mojs.Shape({
36-
parent: '#spinner',
37-
shape: 'circle',
38-
stroke: '#FC46AD',
39-
strokeDasharray: '125, 125',
40-
strokeDashoffset: {'0': '-125'},
41-
strokeWidth: 4,
42-
fill: 'none',
43-
left: '50%',
44-
top: '50%',
45-
angle: {'-90': '270'},
46-
radius: 20,
47-
isShowStart: true,
48-
duration: 2000,
49-
easing: 'back.in',
50-
})
51-
.then({
52-
angle: {'-90': '270'},
53-
strokeDashoffset: {'-125': '-250'},
54-
duration: 3000,
55-
easing: 'cubic.out',
56-
onComplete () {
57-
loader.replay(0); // create an infinite loop
58-
}
59-
})
60-
.play();
61-
```
62-
</ExampleSpinner>
35+
<ClientOnly>
36+
<ExampleSpinner height="200px" id="spinner">
37+
```js
38+
var loader = new mojs.Shape({
39+
parent: '#spinner',
40+
shape: 'circle',
41+
stroke: '#FC46AD',
42+
strokeDasharray: '125, 125',
43+
strokeDashoffset: {'0': '-125'},
44+
strokeWidth: 4,
45+
fill: 'none',
46+
left: '50%',
47+
top: '50%',
48+
angle: {'-90': '270'},
49+
radius: 20,
50+
isShowStart: true,
51+
duration: 2000,
52+
easing: 'back.in',
53+
})
54+
.then({
55+
angle: {'-90': '270'},
56+
strokeDashoffset: {'-125': '-250'},
57+
duration: 3000,
58+
easing: 'cubic.out',
59+
onComplete () {
60+
loader.replay(0); // create an infinite loop
61+
}
62+
})
63+
.play();
64+
```
65+
</ExampleSpinner>
66+
</ClientOnly>
6367

6468
Go creative!
6569

0 commit comments

Comments
 (0)