Skip to content

Commit afeedac

Browse files
yyx990803yyx990803
committed
tutorial wip
1 parent 3fd13ae commit afeedac

File tree

8 files changed

+172
-8
lines changed

8 files changed

+172
-8
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"vitepress": "^0.17.3"
1010
},
1111
"dependencies": {
12-
"@vue/repl": "^0.2.4",
12+
"@vue/repl": "^0.2.5",
1313
"@vue/theme": "^0.1.6"
1414
}
1515
}

‎src/.vitepress/config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,21 @@ const sidebar = {
436436
}
437437
]
438438
}
439+
],
440+
'/tutorial/': [
441+
{
442+
text: 'Tutorial',
443+
items: [
444+
{
445+
text: '1. Hello World',
446+
link: '/tutorial/#step-1'
447+
},
448+
{
449+
text: '2. Render a List',
450+
link: '/tutorial/#step-2'
451+
}
452+
]
453+
}
439454
]
440455
}
441456

‎src/.vitepress/theme/components/ReplLoading.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="repl-loading">
3+
<div class="lds-ring">
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
<div></div>
8+
</div>
9+
<div>Repl is loading...</div>
10+
</div>
11+
</template>
12+
13+
<style>
14+
.repl-loading {
15+
font-weight: 600;
16+
font-size: 16px;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
height: 66vh;
22+
}
23+
.lds-ring {
24+
display: inline-block;
25+
position: relative;
26+
width: 40px;
27+
height: 40px;
28+
margin-bottom: 10px;
29+
}
30+
.lds-ring div {
31+
box-sizing: border-box;
32+
display: block;
33+
position: absolute;
34+
width: 32px;
35+
height: 32px;
36+
margin: 4px;
37+
border: 4px solid;
38+
border-radius: 50%;
39+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
40+
border-color: var(--vt-c-brand) transparent transparent transparent;
41+
}
42+
.lds-ring div:nth-child(1) {
43+
animation-delay: -0.45s;
44+
}
45+
.lds-ring div:nth-child(2) {
46+
animation-delay: -0.3s;
47+
}
48+
.lds-ring div:nth-child(3) {
49+
animation-delay: -0.15s;
50+
}
51+
@keyframes lds-ring {
52+
0% {
53+
transform: rotate(0deg);
54+
}
55+
100% {
56+
transform: rotate(360deg);
57+
}
58+
}
59+
</style>

‎src/examples/Examples.vue renamed to ‎src/examples/ExampleRepl.vue

File renamed without changes.

‎src/examples/index.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
---
22
aside: false
33
page: true
4+
returnToTop: false
45
---
56

67
<script>
78
import { defineAsyncComponent } from 'vue'
9+
import ReplLoading from '../.vitepress/theme/components/ReplLoading.vue'
810

911
export default {
1012
components: {
11-
Examples: defineAsyncComponent(() => import('./Examples.vue'))
13+
ExampleRepl: defineAsyncComponent({
14+
loader: () => import('./ExampleRepl.vue'),
15+
loadingComponent: ReplLoading
16+
})
1217
}
1318
}
1419
</script>
1520

1621
<ClientOnly>
17-
<Examples />
22+
<ExampleRepl />
1823
</ClientOnly>

‎src/tutorial/TutorialRepl.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script setup>
2+
import { Repl, ReplStore } from '@vue/repl'
3+
import '@vue/repl/style.css'
4+
5+
const store = new ReplStore()
6+
7+
// TODO make dynamic
8+
const preference = document.documentElement.classList.contains(
9+
'prefer-composition'
10+
)
11+
? 'composition'
12+
: 'options'
13+
</script>
14+
15+
<template>
16+
<div class="tutorial">
17+
<div class="instruction">
18+
<h1>1. Hello World</h1>
19+
<p>Let's do get something on the screen!</p>
20+
<p>Next Step &gt;</p>
21+
</div>
22+
<Repl :store="store" :showCompileOutput="false" />
23+
</div>
24+
</template>
25+
26+
<style scoped>
27+
.tutorial {
28+
--ins-height: min(30vh, 250px);
29+
}
30+
31+
.vue-repl,
32+
.instruction {
33+
max-width: 1105px;
34+
border-right: 1px solid var(--vt-c-divider-light);
35+
}
36+
37+
.instruction {
38+
height: var(--ins-height);
39+
padding: 24px 32px;
40+
border-bottom: 1px solid var(--vt-c-divider-light);
41+
font-size: 15px;
42+
overflow-y: auto;
43+
}
44+
45+
.instruction h1 {
46+
font-weight: 600;
47+
font-size: 18px;
48+
margin-bottom: 0.5em;
49+
}
50+
51+
.vue-repl {
52+
height: calc(100vh - var(--vp-nav-height) - var(--ins-height));
53+
}
54+
55+
@media (max-width: 960px) {
56+
.vue-repl {
57+
border: none;
58+
height: calc(
59+
100vh - var(--vp-nav-height) - var(--ins-height) - 48px
60+
);
61+
}
62+
}
63+
</style>

‎src/tutorial/index.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
1-
# Tutorial
1+
---
2+
aside: false
3+
page: true
4+
returnToTop: false
5+
---
6+
7+
<script>
8+
import { defineAsyncComponent } from 'vue'
9+
import ReplLoading from '../.vitepress/theme/components/ReplLoading.vue'
10+
11+
export default {
12+
components: {
13+
TutorialRepl: defineAsyncComponent({
14+
loader: () => import('./TutorialRepl.vue'),
15+
loadingComponent: ReplLoading
16+
})
17+
}
18+
}
19+
</script>
20+
21+
<ClientOnly>
22+
<TutorialRepl />
23+
</ClientOnly>

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -291,10 +291,10 @@
291291
estree-walker "^2.0.2"
292292
magic-string "^0.25.7"
293293

294-
"@vue/repl@^0.2.4":
295-
version "0.2.4"
296-
resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.2.4.tgz#2d97a2b804fa1b96360fa9ff85ad284838cfc19c"
297-
integrity sha512-Vo45lseAJeb4+tJRCdG3vOxu5dA7/aKL7xxLGOp5lmD0dPm0l0VvJ9koZW8OEkRLrKFFv8x6y7tvqOLffAYL+w==
294+
"@vue/repl@^0.2.5":
295+
version "0.2.5"
296+
resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.2.5.tgz#c1bf9823df53523620405916df8ef63d4e791367"
297+
integrity sha512-wYmoFRU8Lv03j3cBY++r5Kn/LfT+R4Hgk+/IZ2TbW2NqwEzyqkTcAooIrUdsFEmbPubberBAmkPcij5xKXwzYw==
298298

299299
"@vue/[email protected]":
300300
version "3.2.11"

0 commit comments

Comments
 (0)